Bootstrap allows to use mobile-first flexbox grid to build layouts of all shapes and sizes.
Table of contents
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
, wheremax-width
is set at each responsive breakpoints. -
.container-{breakpoint}
- responsive container, wherewidth
is equal to100%
until the specified breakpoint, after thatwidth
equals to corresponding width values at higher breakpoints. -
.container-fluid
, wherewidth: 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.
Top comments (0)