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