How can I edit the font size of heading in bootstrap and sass? and tried this code and it doesn't work, help me fix this. This is my HTML CODE:
<span class="h1" id="minutes">00</span>
<span class="h1" id="colon">:</span>
<span class="h1" id="seconds">00</span>
<span class="h1" id="colon">.</span>
<span class="h1" id="milliseconds">00</span>
This is my SASS Code
@import "../node_modules/bootstrap/scss/_functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_utilities";
$utilities: () !default;
$utilities: map-merge((
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: (
1: 7rem,
2: 6rem,
3: 5rem,
4: 4rem,
5: 3rem,
6: 2rem
),
),
),
$utilities
);
@import "../node_modules/bootstrap/scss/bootstrap";
NOTE: Never change default values in bootstrap files instead always modify values using custom CSS/JS files.
try this code :
@import "../node_modules/bootstrap/scss/_functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_utilities";
$h1-font-size: 7rem;
$h2-font-size: 6rem;
$h3-font-size: 5rem;
$h4-font-size: 4rem;
$h5-font-size: 3rem;
$h6-font-size: 2rem;
@import "../node_modules/bootstrap/scss/bootstrap";
Check the bootstrap documentation you can change the font size variables
https://getbootstrap.com/docs/5.0/utilities/text/#font-size
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With