CODEWITHSUNDEEP
bootstrap-5
Eric L.
Eric L.

Reputation: 85

How to change font size at breakpoints bootstrap 5

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

Upvotes: 7

Views: 13838

Answers (6)

Najathi
Najathi

Reputation: 3015

This is works for 100%.

// bootstrap
@import 'bootstrap/scss/bootstrap';

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

@import "bootstrap/scss/utilities/api";

Upvotes: 0

ZenGardener
ZenGardener

Reputation: 71

For bootstrap v5, checkout the Utility API page in the docs.

https://getbootstrap.com/docs/5.2/utilities/api/#using-the-api

if this is ALL you wish to change/modify your myCustom.scss file used for compiling from beginning to end would look like this:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

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

@import "bootstrap/scss/utilities/api";
@import 'bootstrap/scss/bootstrap';

If an old dog like me can learn new tricks so can you, best of luck!

Upvotes: 6

Jerry_Beavers
Jerry_Beavers

Reputation: 11

Open _utilities.scss and look for the "font-size" key in @utilites: map-merge and add responsive: true.

$utilities: map-merge(
   (
    ...
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes,
      responsive: true
    ),
    ...
   )
)

This will allow the usage of breakpoints. For example, .fs-lg-n sets the font-size to n at the large breakpoint and beyond.

Upvotes: 1

ListerineBoi
ListerineBoi

Reputation: 141

This might not be a straightforward solution for your question/problem, but I have a workaround solution that might help your case.

<h1 class=" fs-2 d-none d-xxl-block">Your Text</h1>
<h1 class=" fs-5 d-none d-xl-block d-xxl-none"> Your Text</h1>

you can hide certain elements from a certain breakpoint and you can make other elements for the appropriate breakpoint.

for further explanation you can read this documentation: https://getbootstrap.com/docs/5.2/utilities/display/#hiding-elements

Upvotes: 6

Greg
Greg

Reputation: 175

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).

Upvotes: 5

Shivam Samant
Shivam Samant

Reputation: 1

Because fs is not the class for font size. You can use fz-sm-5 or fz-md-4 etc.

Upvotes: -5

Related Questions