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  id="minutes">00</span>
<span  id="colon">:</span>
<span  id="seconds">00</span>
<span  id="colon">.</span>
<span  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";

CodePudding user response：

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