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 :)
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!