The Complete Guide to Bootstrap Font Size

Bootstrap has some great built-in methods for setting element font size and making font size responsive. In this tutorial I will discuss and demo the most features Bootstrap offers for controlling font size.

Here is a screenshot of elements with a custom root font size sass variable:

In the sections below we will explore Bootstrap typography elements and their default font sizes, customize the Bootstrap root font size variable and other sass variables, and test Bootstrap Responsive Font Size (RFS) directives.

Full code for this Bootstrap font size demo is in the Resources section.

Bootstrap Typography Elements

Bootstrap has several elements that are intended to change the look and feel of text, including font size. There are also several classes that can be used affect text, including font size.

Pictured below are a handful of Bootstrap typography elements with default Bootstrap styling:

The h1 element is highlighted and it’s styles are visible in dev tools. By default, the h1 element font size is a dynamic combination of rem and vw. This means it’s font size will change if the root font size changes or if the screen size changes.

Another example is the div with class .initialism pictured below:

A div typically has a font size of 1rem (the Bootstrap root font size), but when the initialism class is added then the font size is changed to 0.875rem. This is a built-in Bootstrap class.

Root Font Size Variable

If you need to adjust the font size of an app beyond what is possible from using different typography components and classes, you may need to change the root font size. This is easily accomplished by changing the $font-size-root variable.

The Bootstrap $font-size-root variable has a default value of 1rem. This default is applied to the body class through the --bs-body-font-size tag, as seen below:

We can easily change the Bootstrap font-size-root variable in our .scss file:

$font-size-root: 2rem;

Now the font of all the elements is twice as large by default. This includes the button element which is a React-Bootstrap button component.

Other Font Variables

We can update other font-related variables besides just the root variable. Here is a list of vars from the Bootstrap docs.

Some of the Bootstrap elements have dedicated variables. Here are two examples that we will customize:

• $legend-font-size – this controls font for <legend/> elements
• $small-font-size – this controls font for <small/> elements

The <legend /> element has a default font size of calc(1.275rem + 0.3vw).

The <small /> element has a default font size of 0.875rem. Notice in the screenshot below that it gets it’s font size from the imported reboot.scss. There is no code needed to import reboot.scss, it happens by default with @import "bootstrap/scss/bootstrap"; in your .sass file.

In my .sass file I can change the variables that affect both the legend and small elements:

$legend-font-size: calc(1rem + 0.1vw);
$small-font-size: 1rem;

Here’s our legend element with the customized font size:

Responsive Font Size

Bootstrap responsively scales common sizing and spacing properties. This is known as their Responsive Font Size system. According to the docs linked to in a previous section, RFS started by scaling fonts and then was expanded to include other properties.

Here’s example code for how to use the @include font-size directive from Bootstrap RFS:

//css
.btn {
  @include font-size(4rem);
}

//react-bootstrap button in jsx
<Button>Button Element</Button>

This example uses a react-bootstrap Button which renders with the .btn class by default.

I increased the screen size significantly and the Button font grew accordingly:

Many other CSS properties such as padding and margin can be passed to the RFS includes and mixin directives. RFS also includes media queries with the @media directive.

Many Bootstrap components such as the NavBar have built-in responsive styling and sizing.

Resources:

I used the font size utility class fs-1 to style the card in this tutorial.

Here is the full code from this Bootstrap font size tutorial. The variables have to come before the bootstrap scss import, and the @include directive has to come after the import.

//CustomFontSize.scss
$font-size-root: 2rem;

$legend-font-size: calc(1rem + 0.1vw);
$small-font-size: 1rem;

@import "bootstrap/scss/bootstrap";

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

//CustomFontSize.tsx
import React from "react";
import Button from "react-bootstrap/Button";
import "./CustomFontSize.scss";

export default function CustomFontSize() {
  return (
    <div style={{ marginTop: 24, marginLeft: 12 }}>
      <h1 className="mb-4">Heading 1 Element</h1>
      <h4 className="mb-4">Heading 4 Element</h4>
      <legend className="mb-4">Legend Element</legend>
      <small>Small Element</small>
      <div className="mt-4 initialism">WWF (World Wildlife Fund)</div>
      <Button className="mt-4">Button Element</Button>
    </div>
  );
}