Cheat Sheet for Bootstrap. Layout

This content originally appeared on DEV Community and was authored by Julia Shlykova

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

Breakpoints
Containers
Grid
Row
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.