Bootstrap 5: Layout basics
2026-02-21 02:49 Diff
https://hexlet.io/courses/bootstrap_basic/lessons/text-content/theory_unit

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:

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:

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:

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:

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.