Register to get access to free programming courses with interactive exercises

Adaptability Bootstrap 5: Layout basics

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. This means that the code for mobile devices is given first, and then code for desktop comes after. You may be wondering why Mobile First is important if it’s only about using the right classes. The answer to this question lies in the screen resolutions Bootstrap works with. There are five resolutions in the latest version:

  • Extra small. f the viewport width is less than 576px. Within Bootstrap, this resolution is not labeled in any way. This type is the default value. Width of .container: 100%

  • Small. If the viewport width is greater than or equal to 576px. Within Bootstrap, this resolution is labeled -sm-. Width of .container: 540px

  • Medium. If the viewport width is greater than or equal to 768px. Within Bootstrap, this resolution is labeled -md-. Width of .container: 720px

  • Large. If the viewport width is greater than or equal to 992px. Within Bootstrap, this resolution is labeled -lg-. Width of .container: 960px

  • Extra large. If the viewport width is greater than or equal to 1200px. Within Bootstrap, this resolution is labeled -xl-. Width of .container: 1140px

Prefix Viewport width Container width

-sm-

>=576px

540px

-md-

>=768px

720px

-lg-

>=992px

960px

-xl-

>=1200px

1140px

These prefixes that the resolutions have, are used within grids and utilities. The utilities will be explored in a future lesson.

It’s important to note that: when using these prefixes, you need to remember the Mobile First approach. This means that 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-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.

row-cols-*

As of Bootstrap 4.4, there are new classes for creating columns. These classes are .row-cols-*, where * — s 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. This is useful for creating a section of similar elements that have 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 layout as a whole.

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


Hexlet Experts

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

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
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
Layout Designer icon
Profession
Under development beginner
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

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

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.