Responsive breakpoints

A breakpoint is a screen width at which the page layout changes. On a phone cards are easier to read stacked, on a laptop — side by side. Bootstrap defines six breakpoints and puts their names into column classes, so you do not have to write the media queries from the tutorial.

Six sizes

The smallest size has no name in the class: col-6 applies on any screen.

The "from this width up" rule

A class with a breakpoint name works from that width and on all larger screens. Below it the column takes the whole row:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col-md-6 border bg-light py-2">Free plan</div>
    <div class="col-md-6 border bg-light py-2">Team plan</div>
  </div>
</div>

On screens from 768 pixels the plans stand in two columns; on narrower ones they are stacked. Resize the browser window to see the switch. This approach is called mobile first: the phone layout comes first, then additions for bigger screens.

Several sizes at once

Classes for different breakpoints can be combined on one element. Each next one overrides the previous from its width:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3 border bg-light py-2">Users</div>
    <div class="col-12 col-sm-6 col-lg-3 border bg-light py-2">Revenue</div>
    <div class="col-12 col-sm-6 col-lg-3 border bg-light py-2">Tasks</div>
    <div class="col-12 col-sm-6 col-lg-3 border bg-light py-2">Reviews</div>
  </div>
</div>

This is the stats row of the admin dashboard: one block per line on a phone, two on a tablet, all four in a row on a wide screen.

Columns per row

When all columns are the same, it is easier to set their number on the row itself with row-cols-*:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4">
    <div class="col border bg-light py-2">Users</div>
    <div class="col border bg-light py-2">Revenue</div>
    <div class="col border bg-light py-2">Tasks</div>
    <div class="col border bg-light py-2">Reviews</div>
  </div>
</div>

The result is the same, but the columns keep one short col class.

Responsive containers

Containers have breakpoint variants too: container-md is full width below 768 pixels and behaves like a regular container above.

Common mistake

Expecting col-md-6 to apply only on medium screens. The class works "from md up", so on a large monitor the column is also half wide. If a large screen needs a different width, add another class, for example col-md-6 col-xl-4.