Bootstrap 4 with Responsive Font Sizes (RFS)
Posted
on
Contents
Bootstrap v4.3 introduced Responsive Font Sizes (RFS) which you can enable in the SCSS compiler. If you’re compiling the CSS for your project I highly recommend turning it on.
If you’re loading Bootstrap from a CDN though you won’t be able to take advantage of those RFS rules. I created a quick fix - a tiny CSS file with the relevant compiled changes.
@media (max-width: 1200px) {
legend {
font-size: calc(1.275rem + 0.3vw);
}
h1,
.h1 {
font-size: calc(1.375rem + 1.5vw);
}
h2,
.h2 {
font-size: calc(1.325rem + 0.9vw);
}
h3,
.h3 {
font-size: calc(1.3rem + 0.6vw);
}
h4,
.h4 {
font-size: calc(1.275rem + 0.3vw);
}
.display-1 {
font-size: calc(1.725rem + 5.7vw);
}
.display-2 {
font-size: calc(1.675rem + 5.1vw);
}
.display-3 {
font-size: calc(1.575rem + 3.9vw);
}
.display-4 {
font-size: calc(1.475rem + 2.7vw);
}
.close {
font-size: calc(1.275rem + 0.3vw);
}
}
You can either copy the above CSS to your site’s CSS (after loading Bootstrap CSS) or alternatively load it via a CDN with:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-rfs/bootstrap-rfs.css">
Optional: You can add media="screen and (max-width: 1200px)" so it will only load the CSS asynchronously. The CSS has the ‘max-width: 1200px’ media query included as well so this is optional.
