Bootstrap 4 with Responsive Font Sizes (RFS)

Posted: February 21, 2019

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 file on screens up to 1200px, saving a HTTP request for users with larger screens. The CSS has the ‘max-width: 1200px’ media query included as well so this is optional.

Demo

Comments

Will Stone

Thanks Christian. I thought there was going to be more to it than that. This is a great quick fix until v5 is released.

Leave a Comment

Your email address will not be published. Required fields are marked *