Working with text — Bootstrap 5: Layout basics

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 right tag structure, while modifying the content as needed by the design. Consider this using the creation of headers as an example.

Beginner developers use different header levels just 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’s not clear which headline refers to what. The`<h3>` header follows the <h1> header, which means skipping an entire section between them with a second level header. The benefits themselves no longer affect the header “Benefits of working with us,” as they have headers with more weight.

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 it were wrapped in one of the headers. This 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>

In terms of visual presentation, nothing has changed, and the semantic meaning has returned to normal.

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

The tutorial already describes the .h*, classes that can be used for this selection. Additionally, in Bootstrap, there are 4 classes that are responsible for creating visual headers. These are the .display-1, .display-2, .display-3 and .display-4 classes. By default, they’re larger in size relative to 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, which means that there’s no need to write your own styles.

For example, the .list-inline class is used to create an inline list, which will reset the values of the list-style and padding properties. If you add the .list-inline-item class to the child elements, you 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>

RFS

Since Bootstrap 4.3, there has been a Responsive Font Sizes (RFS), feature, which 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, it’s impossible for the text to become larger than the headings.

To enable RFS, you must specify true in the $enable-responsive-font-sizes variable. This can be done 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. This is done for convenient use within the project. In this way, the semantic meaning of the functions is preserved. All functions take 2 parameters:

Adaptivity value. Here you can choose not to specify the unit of measure, or specify the value in px or rem
Flag !important. The default value is false. If true is used, the !important flag will be added to the font-size property

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

Font management

To manage sets of fonts in Bootstrap, we have a SASS variable, $font-family-base which contains the fonts available within the project. By default, this variable takes the value from the $font-family-sans-serif variable, which contains 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 show the content in the way the developer intended.

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

Recommended materials

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

Article “How to Learn and Cope with Negative Thoughts“
Article “Learning Traps“
Article “Complex and simple programming tasks“

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access

130

courses

1000

exercises

2000+

hours of theory

3200

tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

130 courses, 2000+ hours of theory
1000 practical tasks in a browser
360 000 students

Our graduates work in companies:

Suggested learning programs

Profession

Under development beginner

Layout Designer

Layout with the latest CSS standards

start anytime 5 months

Use Hexlet to the fullest extent!

Ask questions about the lesson
Test your knowledge in quizzes
Practice in your browser
Track your progress

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.