font size "fs-5" and "fs-6" are fixed (or not responsive)

[squashking]

I just want the font size to be smaller on smaller screens. But I notice that "fs-6" is always 16px and "fs-5" is always 20px no matter how big the viewport is, but "fs-1" ~"fs-4" seem to be responsive when the viewport is changed. Aren't they all supposed to be responsive? And it doesn't sound good that the smallest size "fs-6" is 16px which is already very big.

I have tried adding breakpoints to "fs" to make it responsive like the following, but it doesn't work at all (Bootstrap v5.0.2):

<p class="fs-1 fs-md-3">Test text</p>

It seems that adding breakpoints to "fs" is not allowed, so "fs-md-3" cannot be recognized. Could anyone tell me a method to display smaller font size on smaller screens? I don't need smooth transitions like using RFS. Thank you very much!

[ffoodd]

If you're compiling from Sass sources, you can disable RFS by setting $enable-rfs to false (see our Sass options docs page) and modify the font-size utilities to make them responsive as explained in the utilities API docs.

By doing so, you should be able to get what you want.

[squashking]

@ffoodd Thanks but I'm not talking about RFS. My questions are not answered:

1. why "fs-1" ~"fs-4" are responsive while "fs-5" and "fs-6" are not responsive?
2. Can I add breakpoints to "fs" (e.g., "fs-md-3")?
3. How can I get smaller fonts without recompiling? The default smallest size "fs-6" is 16px which is too big
   Thank you very much again!

[ffoodd]

Our font-sizes are made responsive with RFS, and we keep its default base value of 1.25rem.

That's why no value above 1.25rem will scale down in our default build.

To add breakpoints, you need to modify utilities as explained earlier and compile Sass by yourself.

You have smaller font size using .small class, but I think that's all.

If you want more control regarding values, you'll need to work on the Sass side and compile it on your own.

[Levan777]

Guys, I'm trying to add fs-{breakpoint}-n classes as mentioned using this code:

$utilities: map-merge( $utilities, ( "fs": map-merge( map-get($utilities, "fs"), ( responsive: true ), ), ) ) !default;

Seems like I'm missing something. Can you help?

[bradmkjr]

@Levan777 You need to add that map-merge before the final import of Bootstrap utilities api. It adds the responsive font-sizes to the utility map.

Here is a complete example of a custom.scss I used for me REACT project to get responsive font-size in Bootstrap 5:

@import "~bootstrap/scss/mixins/banner";
@include bsBanner("");

// scss-docs-start import-stack
// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";

@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";

@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/placeholders";

// Helpers
@import "~bootstrap/scss/helpers";

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

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

[nidhi1912001]

I just want the font size to be smaller on smaller screens. But I notice that "fs-6" is always 16px and "fs-5" is always 20px no matter how big the viewport is, but "fs-1" ~"fs-4" seem to be responsive when the viewport is changed. Aren't they all supposed to be responsive? And it doesn't sound good that the smallest size "fs-6" is 16px which is already very big.

I have tried adding breakpoints to "fs" to make it responsive like the following, but it doesn't work at all (Bootstrap v5.0.2):

<p class="fs-1 fs-md-3">Test text</p>

It seems that adding breakpoints to "fs" is not allowed, so "fs-md-3" cannot be recognized. Could anyone tell me a method to display smaller font size on smaller screens? I don't need smooth transitions like using RFS. Thank you very much!