Bootstrap 5: Layout basics
2026-02-21 02:52 Diff
https://hexlet.io/courses/bootstrap_basic/lessons/adaptive/theory_unit

Adaptability is an integral part for any modern website. You’ll have learned about many of the concepts relating to adaptivity in the CSS: Adaptability course. Now, this knowledge will help you quickly understand how Bootstrap works.

Bootstrap uses the Mobile First approach at its core. It means that the code for mobile devices goes first, and then the code for desktops comes after. You may wonder why Mobile First is important if it’s only about using the correct classes. The answer to this question lies in the screen resolutions Bootstrap works with. There are five resolutions in the latest version:

  • Extra small — the viewport width is less than 576px. Within Bootstrap, this resolution is the default value. The width is .container: 100%
  • Small — the viewport width is greater than or equal to 576px. Within Bootstrap, this resolution is labeled -sm-. The width is .container: 540px
  • Medium — the viewport width is greater than or equal to 768px. Within Bootstrap, this resolution is labeled -md-. The width is .container: 720px
  • Large — the viewport width is greater or equal to 992px. Within Bootstrap, this resolution is labeled -lg-. The width is .container: 960px
  • Extra large — if the viewport width is greater or equal to 1200px. Within Bootstrap, this resolution is labeled -xl-. The width is .container: 1140px

We will use these prefixes of resolutions within grids and utilities, exploring them more in a future lesson.

When using these prefixes, you need to remember the Mobile First approach. It means the prefixes affect their own and more viewport width. For example, classes prefixed with -md- won’t be used when the resolution is less than 768px.

Let’s use the prefixes we learned on the columns. You can add the desired prefix to each of them, thereby having different things displayed at different screen resolutions:

In this example, the sidebar works according to the following algorithm:

  • If the width is less than 768px, the panel takes up the entire available viewport width. The .col-12 class is responsible for this
  • At a width of 768px to 992px, the panel takes up 3 of the 12 columns in the grid. The .col-md-3 class is responsible for this
  • At 992px wide, the panel takes up 2 of the 12 columns in the grid. The .col-lg-2 class is responsible for this

Go to the Codepen website to see the full results. Change the columns however you want them.

The `row-cols-*`` classes

As of Bootstrap 4.4, there are new classes for creating columns. These classes are .row-cols-** where ** is a value from 1 to 6. What’s so interesting about them? They allow you to set the number of columns at the row level when using the .col class in the child elements. It helps to create a section of similar elements with the same width. Such elements may be product cards.

Like the .col-** classes, the .row-cols-** classes have the prefixes we learned in this lesson. Their purpose and principle of operation are no different. As an example, let’s create a small catalog where:

  • If the width is larger than 992px, it puts 6 cards in a row
  • At a width of 768px to 992px, it puts 4 cards in a row
  • At a width of 576px to 768px, it puts 2 cards in a row
  • At widths less than 576px, it puts 1 card in a row

With so many conditions, the solution to the problem comes down to just adding a couple of classes to the row level:

As in the last example, change the values to see how changing just one class affects the overall layout.

When using classes .row-cols-** classes, the values of .col-** elements are ignored. The card placement control is only on the row level.