Bootstrap/site/content/docs/4.3/getting-started/rfs.md

layout	title	description	group	toc
docs	RFS	Bootstrap's resizing engine.	getting-started	true

What is RFS?

Bootstrap's side project RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling basically every value for any css property with units, like margin, padding, border-radius or even box-shadow.

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior.

Using RFS

The mixins are included in Bootstrap and are available once you include Bootstraps' scss. RFS can also be installed standalone if needed.

Using the mixins

The rfs() mixin has shorthands for font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom and padding-left which can be used like this:

.title {
  @include font-size(4rem);
}

which outputs the following CSS:

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (max-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Any other property can be passed to the rfs() mixin like this:

.selector {
  @include rfs(4rem, border-radius);
}

!important can also just be added to whatever value you want:

.selector {
  @include padding(2.5rem !important);
}

Using the functions

• rfs-value() converts a value into a rem value if a px value is passed, in other cases it returns the same result.
• rfs-fluid-value() returns the fluid version of a value if the property needs rescaling.

In this example we use one of Bootstrap's built-in [responsive breakpoint mixins]({{< docsref "/layout/overview#responsive-breakpoints" >}}) to only apply styling below the lg breakpoint.

.selector {
  @include media-breakpoint-down(lg) {
     padding: rfs-fluid-value(2rem);
     font-size: rfs-fluid-value(1.125rem);
  }
}

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
  }
}

Extended documentation

RFS is a separate project under the Bootstrap organisation. More about RFS and its configuration can be found on its GitHub repository.