[FIXED] How to change font size at breakpoints bootstrap 5

Issue

I want to change the size of my font handwriting when breaking point with Bootstrap V5. But I find that this fs-sm-5 or fs-md-4 is not working. Is the solution to manage this directly in my css file or is there a V5 bootstrap solution? Thank you in advance for your assistance

Solution

You can make fs-BREAKPOINT-n work with Bootstrap 5.

In your bootstrap.scss file insert the following under the @import for utilities.

"font-size": map-merge(map-get($utilities, "font-size"),
(responsive: true),
),

This will create available classes for the following:

.fs-n
.fs-sm-n
.fs-md-n
.fs-lg-n
.fs-xl-n
.fs-xxl-n

Responsive offcanvas classes are available across for each breakpoint where "n" a number from 1-6. This works like most responsive utilities (from the breakpoint UP).

Answered By - Greg

Answer Checked By - Mildred Charles (PHPFixing Admin)