Responsive Font Sizes

You can also enable responsive font sizing by setting $enable-responsive-font-sizes to true which scales font-size multipliers based on screen size using CSS Calc.

You can find further information about responsive font sizing here.

Bootstrap does not provide any classes for managing responsive font size based on breakpoints but you could use the Bootstrap Media Breakpoint Mixins to generate your own classes.

Steps

Create a Form with a Bootstrap4 Presentation Template

Create a Text Control with the content: My Responsive Text

Add the following SCSS to the style.scss file:

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

Run the form and change the size of the browser to observe the behaviour at different screen sizes.

Previous Page To Module