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
| Prefix | Viewport width | Container width |
|---|---|---|
|
>=576px |
540px |
|
>=768px |
720px |
|
>=992px |
960px |
|
>=1200px |
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:
<div class="container">
<div class="row">
<aside class="col-12 col-md-3 col-lg-2">
<!-- Sidebar -->
</aside>
<main class="col">
<!-- Main Content -->
</main>
</div>
</div>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-12class 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-3class is responsible for this -
At 992px wide, the panel takes up 2 of the 12 columns in the grid. The
.col-lg-2class 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:
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 row-cols-lg-6">
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
<article class="col"><!-- Card layout --></article>
</div>
</div>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.
Do it yourself
Create a grid for the product catalog.
-
On
smand smaller mobile resolutions, 1 card takes up the full width -
mdbreakpoint: 3 cards per row -
lgbreakpoint: 5 cards per row -
xlbreakpoint: 6 cards per row
You can choose any of the ways to create an adaptive grid.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
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.
