How to Customize Bootstrap 5 Font Size for fs-* class in SASS variables

Question

how to change Bootstrap 5 fs-* class in sass? because In the documentation only shows how to modify h-* class such as h5-font-size, but not the fs-* class.

Answer 1

You would modify the "font-size" utility using the Utilities API. Merge the new values with the existing $font-sizes map...

@import "functions";
@import "variables";
@import "utilities";

$font-sizes: (
  1: 12rem,
  2: 10rem,
  3: 7rem,
  4: 5rem,
  5: 3rem,
  6: 2rem,
);

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

@import "bootstrap";

SASS Demo

---

Related: Add new utilities with Bootstrap 5