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.

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

Print Share Comment Cite Upload Translate Updates

APA

Julia Shlykova | Sciencx (2024-07-03T11:53:09+00:00) Cheat Sheet for Bootstrap. Layout. Retrieved from https://www.scien.cx/2024/07/03/cheat-sheet-for-bootstrap-layout/

MLA

" » Cheat Sheet for Bootstrap. Layout." Julia Shlykova | Sciencx - Wednesday July 3, 2024, https://www.scien.cx/2024/07/03/cheat-sheet-for-bootstrap-layout/

HARVARD

Julia Shlykova | Sciencx Wednesday July 3, 2024 » Cheat Sheet for Bootstrap. Layout., viewed ,<https://www.scien.cx/2024/07/03/cheat-sheet-for-bootstrap-layout/>

VANCOUVER

Julia Shlykova | Sciencx - » Cheat Sheet for Bootstrap. Layout. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/03/cheat-sheet-for-bootstrap-layout/

CHICAGO

" » Cheat Sheet for Bootstrap. Layout." Julia Shlykova | Sciencx - Accessed . https://www.scien.cx/2024/07/03/cheat-sheet-for-bootstrap-layout/

IEEE

" » Cheat Sheet for Bootstrap. Layout." Julia Shlykova | Sciencx [Online]. Available: https://www.scien.cx/2024/07/03/cheat-sheet-for-bootstrap-layout/. [Accessed: ]

rf:citation

» Cheat Sheet for Bootstrap. Layout | Julia Shlykova | Sciencx | https://www.scien.cx/2024/07/03/cheat-sheet-for-bootstrap-layout/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Table of contents