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.