Enable Bootstraps 5 responsive font size (rfs) for base font tags

Viewed 345

I am trying to enable Bootstrap's RFS feature in v5.1.3 for basis font tags globally.

In my SCSS i have set some basic font-sizes, include the bootstrap scss files and set the font-size include. But in the compiled CSS the font sizes are still in rem only.

The SCSS:

//Fonts
$font-size-root: 20px;
$font-size-base: 1rem;
$enable-responsive-font-sizes: true;
$enable-rfs: true;
$h1-font-size: $font-size-root * 1.8;
$h2-font-size: $font-size-root * 1.5;
$h3-font-size: $font-size-root * 1;
$h4-font-size: $font-size-root * 0.75;
$h5-font-size: $font-size-root * 0.5;
$h6-font-size: $font-size-root * 0.25;
$small-font-size: $font-size-root * 0.75;
$font-sizes: (
    1: $h1-font-size,
    2: $h2-font-size,
    3: $h3-font-size,
    4: $h4-font-size,
    5: $h5-font-size,
    6: $h6-font-size,
    7: $small-font-size,
);
@import "Boostrap/bootstrap.scss";
body {
    @include font-size($font-size-base);
    //border-style: solid;
    h1 {
        @include font-size($h1-font-size);
        font-weight: bold;
    }
    h2 {
        @include font-size($h2-font-size);
    }
    h3 {
        @include font-size($h3-font-size);
    }
    h4 {
        @include font-size($h4-font-size);
    }
    h5 {
        @include font-size($h5-font-size);
    }
    h6 {
        @include font-size($h6-font-size);
    }
    p {
        @include font-size($font-size-root);
    }
    .btn {
        @include font-size($btn-font-size);
    }
}

But the compiled CSS looks like this:

body {
  font-size: 1rem;
}
body h1, body .h1 {
  font-size: calc(1.35rem + 1.2vw);
  font-weight: bold;
}
@media (min-width: 1200px) {
  body h1, body .h1 {
    font-size: 2.25rem;
  }
}
body h2, body .h2 {
  font-size: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  body h2, body .h2 {
    font-size: 1.875rem;
  }
}
body h3, body .h3 {
  font-size: 1.25rem;
}
body h4, body .h4 {
  font-size: 0.9375rem;
}
body h5, body .h5 {
  font-size: 0.625rem;
}
body h6, body .h6 {
  font-size: 0.3125rem;
}
body p {
  font-size: 1.25rem;
}
body .btn {
  font-size: 1rem;
}

Am I missing something or did i get the complete idea of this feature wrong? What bothers me the most is the p-tag. It isn't responsive at all.

0 Answers
Related