Bootstrap allows to use mobile-first flexbox grid to build layouts of all shapes and sizes.

Table of contents

1. Breakpoints
2. Containers
3. Grid
4. Row
5. Column

Breakpoints

Breakpoints - customizable widths that makes the layout responsive.
Default breakpoints can be found in scss/_variables.css:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Usually, to simply divide mobile and desktop screens md breakpoint is used.

Containers

Containers are the basic elements in Bootstrap grid.
The basic CSS representation of container's classes:

  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;

You can find all CSS rules for bootstrap here.

Types of containers:

• .container, where max-width is set at each responsive breakpoints.
• .container-{breakpoint} - responsive container, where width is equal to 100% until the specified breakpoint, after that width equals to corresponding width values at higher breakpoints.
• .container-fluid, where width: 100% at all breakpoints.

Bootstrap's values for containers' width and max-width can be found in scss/_variables.css also:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Grid

Bootstrap's grid consists of bootstrap's classes like .container, .row, .col:

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</div>

Here, we built a grid with one row and 3 columns, where:

• container is flexible;
• its' max-width is set to the corresponding value at each breakpoint;
• columns have equal width.

Features of bootstrap's grid:

• rows are wrapped around columns;
• there are 12 template columns available per row

Row

Class .row include these CSS rules:

 display: flex;
 flex-wrap: wrap;

We can indicate number of columns per row with .row-cols-{number-of-columns} instead of applying col-{number} on individual columns. The following code makes the same result:

<div class="row">
  <div class="col-6">item 1</div>
  <div class="col-6">item 2</div>
  <div class="col-6">item 3</div>
  <div class="col-6">item 4</div>
</div>

<div class="row row-cols-2">
  <div class="col">item1</div>
  <div class="col">item2</div>
  <div class="col">item3</div>
  <div class="col">item4</div>
</div>

Column

Thus, to equally distribute width of the container we just use .col class. What should be used if we need column with different width?

• .col-auto - width of column is based on the width of the content.
• .col-{number} - how many template columns can be occupied by the element. If sum of column numbers exceeds 12, then extra columns will wrap onto a new line.
• .col-breakpoint - this class for a columns allows arrangement of columns to start out vertical and become horizontal, when viewport's width is bigger than the breakpoint. We can use -auto and -{number} with this class also.

Thus, for grids that are the same for any devices we can just use .col and .col-*. If we want "stacked to horizontal" behaviour .col-breakpoint-* comes to light.

We can use a combination of classes for each column:

<div class="col-3 col-md-6">
  Column
</div>

This element will occupy 3 template columns until the viewport's width increases to md(768px), then it will occupy 6 template columns.

<div class="col-sm-6 col-md-5 col-lg-6">
Column 1
</div>
<div class="col-sm-6 col-md-5 col-lg-6">
Column 2
</div>

This elements will be positioned in stack until the viewport width becomes larger than sm(576px), then each column will occupy 6 template columns until the viewport width reaches md(768px) then - 5 template columns and once viewport width reaches lg(992px) - again 6 template columns

Columns alignment inside row

Since .row is a flexbox we can align elements inside it easily.

Vertically

We can set these classes on .row element to align columns:

• align-items-start
• align-items-center
• align-items-end

To align a .column element individually we set these classes:

• align-self-start
• align-self-center
• align-self-end

Horizontally

Apply these classes on .row element:

• justify-content-start
• justify-content-center
• justify-content-end
• justify-content-between - the first and the last column are placed at edges. The left space is evenly distributed.
• justify-content-evenly - the space is distributed evenly.
• justify-content-around - the space before the first and last column equals half of space between each pair of adjacent columns.

Offseting columns

• .offset-{number} - how many template columns we need to omit before starting column;
• .offset-{breakpoint}-{number} - how many template columns we need to omit before starting column after reaching breakpoint.