Bootstrap 4 with Responsive Font Sizes (RFS)

Posted on

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 {
    font-size: calc(1.375rem + 1.5vw);
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  .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="">

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.


You might also like

Popover CSS Inspector for Bootstrap 5

A customizable style inspector for Bootstrap Popovers

Bootstrap 5 Print Stylesheet

Optimized CSS for printing