How to change font size at breakpoints bootstrap 5 with API (#2)

Question

A previous stack exists on this topic and seems resolved. How to change font size at breakpoints bootstrap 5

However it doesn't work for me unfortunately as :

1 / when i put the bootstrap API code on my file i have some errors like "map" or "," or ";" I probably not copy past the correct code. (here on bootstrap doc) https://getbootstrap.com/docs/5.0/utilities/api/

2/ Obviously i do not have the expected generator code on my sass raw file. Like

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

where "n" is a number from 1-6

I have 2 sass files :

global.scss including (currently working):

---

@use "sass:map";

@import "../node_modules/bootstrap/scss/functions";

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/utilities";



@import "./palette";
@import "./custom";
@import "./utilities";
@import "./components";


@import "../node_modules/bootstrap/scss/bootstrap.scss"

————

A second file with personal utilities.scss file (currently working):

    $utilities: (

  "height": map-merge(

    map-get($utilities, "height"),

    (
    
      values: map-merge(

        map-get(map-get($utilities, "height"), "values"),

        (300: 300px, 400: 400px, 600: 600px)

      )

    )

  )

)

—————

Now which part of code i need to pick up from the api bootstrap script and paste on with sass file ? Normally in the utilities.scss file. If so, i guess that the previous code in this file need to be readjusted with " ; " at the end ?

I let you explained me :)

Here is the bootstrap script extract : ————

ENABLE RESPONSIVE You can enable responsive classes for an existing set of utilities that are not currently responsive by default. For example, to make the border classes responsive:

```
@import "bootstrap/scss/functions";

@import "bootstrap/scss/variables";

@import "bootstrap/scss/utilities";

$utilities: map-merge(

$utilities, (

"font-size": map-merge(

  map-get($utilities, "font-size"),

  ( responsive: true ),

),

)

);

I've replaced here border by font-size.


Thank you so much for your BIG help :)

Answer 1

Here is what I used to add breakpoint font sizes to my REACT project, contributing to help someone else who comes across this in the future.

@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";

If anyone wants the generated CSS to paste into a non-SCSS based Bootstrap site, this should be the complete set of CSS generated by the above code with standard font sizes:

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

@media (min-width: 576px) {
  .fs-sm-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
  }
  .fs-sm-2 {
    font-size: calc(1.325rem + 0.9vw) !important;
  }
  .fs-sm-3 {
    font-size: calc(1.3rem + 0.6vw) !important;
  }
  .fs-sm-4 {
    font-size: calc(1.275rem + 0.3vw) !important;
  }
  .fs-sm-5 {
    font-size: 1.25rem !important;
  }
  .fs-sm-6 {
    font-size: 1rem !important;
  }
}
@media (min-width: 768px) {
  .fs-md-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
  }
  .fs-md-2 {
    font-size: calc(1.325rem + 0.9vw) !important;
  }
  .fs-md-3 {
    font-size: calc(1.3rem + 0.6vw) !important;
  }
  .fs-md-4 {
    font-size: calc(1.275rem + 0.3vw) !important;
  }
  .fs-md-5 {
    font-size: 1.25rem !important;
  }
  .fs-md-6 {
    font-size: 1rem !important;
  }
}
@media (min-width: 992px) {
  .fs-lg-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
  }
  .fs-lg-2 {
    font-size: calc(1.325rem + 0.9vw) !important;
  }
  .fs-lg-3 {
    font-size: calc(1.3rem + 0.6vw) !important;
  }
  .fs-lg-4 {
    font-size: calc(1.275rem + 0.3vw) !important;
  }
  .fs-lg-5 {
    font-size: 1.25rem !important;
  }
  .fs-lg-6 {
    font-size: 1rem !important;
  }
}
@media (min-width: 1200px) {
  .fs-xl-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
  }
  .fs-xl-2 {
    font-size: calc(1.325rem + 0.9vw) !important;
  }
  .fs-xl-3 {
    font-size: calc(1.3rem + 0.6vw) !important;
  }
  .fs-xl-4 {
    font-size: calc(1.275rem + 0.3vw) !important;
  }
  .fs-xl-5 {
    font-size: 1.25rem !important;
  }
  .fs-xl-6 {
    font-size: 1rem !important;
  }
}
@media (min-width: 1400px) {
  .fs-xxl-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
  }
  .fs-xxl-2 {
    font-size: calc(1.325rem + 0.9vw) !important;
  }
  .fs-xxl-3 {
    font-size: calc(1.3rem + 0.6vw) !important;
  }
  .fs-xxl-4 {
    font-size: calc(1.275rem + 0.3vw) !important;
  }
  .fs-xxl-5 {
    font-size: 1.25rem !important;
  }
  .fs-xxl-6 {
    font-size: 1rem !important;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }
  .fs-2 {
    font-size: 2rem !important;
  }
  .fs-3 {
    font-size: 1.75rem !important;
  }
  .fs-4 {
    font-size: 1.5rem !important;
  }
  .fs-sm-1 {
    font-size: 2.5rem !important;
  }
  .fs-sm-2 {
    font-size: 2rem !important;
  }
  .fs-sm-3 {
    font-size: 1.75rem !important;
  }
  .fs-sm-4 {
    font-size: 1.5rem !important;
  }
  .fs-md-1 {
    font-size: 2.5rem !important;
  }
  .fs-md-2 {
    font-size: 2rem !important;
  }
  .fs-md-3 {
    font-size: 1.75rem !important;
  }
  .fs-md-4 {
    font-size: 1.5rem !important;
  }
  .fs-lg-1 {
    font-size: 2.5rem !important;
  }
  .fs-lg-2 {
    font-size: 2rem !important;
  }
  .fs-lg-3 {
    font-size: 1.75rem !important;
  }
  .fs-lg-4 {
    font-size: 1.5rem !important;
  }
}

Hopefully this helps someone in the future!