Working with texts — Bootstrap 5: Layout basics

• RFS
• Font management

Bootstrap gives you a wide range of possibilities when working with text. Its developers have introduced many different classes for this purpose. Using proper typography and the available Bootstrap tools allows you to create the appropriate tag structure while modifying the content as the design needs. Consider this using the creation of headers as an example.

Beginner developers use different header levels to resize the header. A common example:

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Site page</h1>

      <!-- Text here -->

      <h3>Benefits of working with us</h3>
      <h2>Fast delivery</h2>
      <!-- Text -->
      <h2>Low Prices</h2>
      <!-- Text -->
    </div>
  </div>
</div>

In an attempt to highlight the benefits themselves, the semantics of the headline broke down. Now it is not clear which headline refers to what. The<h3> header follows the <h1> header, skipping an entire section between them with a second-level heading.

To avoid this violation of semantics, Bootstrap has .h* classes that use a number from 1 to 6 instead of an asterisk. These classes will set the appearance of the text as if we wrapped it in one of the headers. It will help solve the problem above. A proper layout would look like this:

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Site page</h1>

      <!-- Text here -->

      <h2 class="h3">Benefits of working with us</h2>
      <h3 class="h2">Fast delivery</h3>
      <!-- Text -->
      <h3 class="h2">Low Prices</h3>
      <!-- Text -->
    </div>
  </div>
</div>

Nothing has changed in visual presentation, and the semantic meaning has returned to normal.

Another common problem is wrapping text that isn’t the page title in a header tag. We do it to highlight a section of the text, but it means forgetting about the accessibility and semantics of the page.

We already discussed the .h* classes we can use for this selection. Additionally, four Bootstrap classes are responsible for creating visual headers:

• .display-1
• .display-2
• .display-3
• .display-4

By default, they’re larger than their brothers, <h1> — <h4>, but their saturation value is lower.

By default, many tags for displaying text content, such as lists, quotes, and term definitions, already have default styles. In addition, many standard tasks are already implemented within Bootstrap, meaning there is no need to write your styles.

For example, the .list-inline class helps create an inline list, which resets the values of the list-style and padding properties. If we add the .list-inline-item class to the child elements, we get a neat inline-list with all the necessary indents:

<nav>
  <ul class="list-inline">
    <li class="list-inline-item"><a href="#">Link 1</a></li>
    <li class="list-inline-item"><a href="#">Link 2</a></li>
    <li class="list-inline-item"><a href="#">Link 3</a></li>
  </ul>
</nav>

See result at CodePen.

RFS

Since Bootstrap 4.3, there has been an RFS feature (Responsive Font Sizes). It is responsible for text adaptivity. When using RFS, fonts on different screen resolutions will automatically adapt while maintaining their proportions relative to each other. With this feature, the text can’t become taller than the headings.

We specify true in the $enable-responsive-font-sizes variable to enable RFS. We can do it in a separate file with your project settings. After that, three functions will become available:

• font-size()
• responsive-font-size()
• rfs()

The first two functions are the sugar of the rfs() function. They call the same function. We do it for convenient use within the project. In this way, we preserve the semantic meaning of the functions. All functions take two parameters:

• Adaptivity value. Here you can choose not to specify the measuring unit or specify the value in px or rem
• Flag !important with the false default value. If we specify true, we add the !important flag to the font-size property

Go to the CodePen website and try changing the width of the viewport.

Font management

To manage sets of fonts in Bootstrap, we have a SASS $font-family-base variable containing the fonts available within the project. By default, this variable takes the value from the $font-family-sans-serif variable containing the following fonts:

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

This set of fonts isn’t random. The list shows the default fonts inside the various operating systems. This trick can speed up the loading of sites because there is no need to download the font to display the content like the developer intended.

If possible, try not to change this set of fonts. It will increase the speed of your site and help avoid various problems when loading fonts.

Do it yourself

Add text to your page. Use headings of the first, second, and third levels. Make them responsive with RFS.

Recommended materials

1. Documentation on using typography in Bootstrap
2. RFS project on Github