Skip to content

Easy-to-add CSS for adding Responsive Font Sizes (RFS) to Bootstrap 4

License

Notifications You must be signed in to change notification settings

coliff/bootstrap-rfs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LICENSE github-stars-image code style: prettier

Responsive Font Sizes (RFS) for Bootstrap 4

Bootstrap 4.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. This repo offers a quick fix - a tiny CSS file with the relevant changes.

Usage

A couple of options are available:

  • Copy the CSS rules to your site
  1. Copy the bootstrap-rfs.css rules to your site's CSS
  2. Add the following to your sites <head> (after loading Bootstrap's) - <link href="bootstrap-rfs.css" rel="stylesheet">
  • Use a CDN
  1. Add the following to your sites <head> (after loading Bootstrap's) - <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-rfs/bootstrap-rfs.css" rel="stylesheet">

Optional: You can add media="screen and (max-width: 1200px)" so it will load the CSS asynchronously. The CSS has the 'max-width: 1200px' media query included as well so this is optional.

Demo

See a demo of Bootstrap 4.3 with RFS