Grid

Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px 1320px
Class prefix col- col-sm- col-md- col-lg- col-xl- col-xxl-
# of columns 12
Gutter width 24px (12px on each side of a column)
Custom gutters Yes
Nestable Yes
Offsets Yes
Column ordering Yes

Vertical alignment (align-items-start)

Use align-items-start class to vertically align-items at the start.

col-sm-4
col-sm-4
col-sm-4
HTML Preview
<!-- Vertical alignment (align-items-start) -->
<div class="row align-items-start">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Vertical alignment (align-items-center)

Use align-items-center class to vertically align-items at the center.

col-sm-4
col-sm-4
col-sm-4
HTML Preview
<!-- Vertical alignment (align-items-center) -->
<div class="row align-items-center">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Vertical alignment (align-items-end)

Use align-items-end class to vertically align-items at the end.

col-sm-4
col-sm-4
col-sm-4
HTML Preview
<!-- Vertical alignment (align-items-end) -->
<div class="row align-items-end">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Align Self

Use the align-self-start,align-self-center, or align-self-end class respectively to vertically align items with a different position.

align-self-start
align-self-center
align-self-end
HTML Preview
<!-- Align Self -->
<div class="row">
    <div class="col-sm-4 align-self-start">
        ...
    </div>
    <div class="col-sm-4 align-self-center">
        ...
    </div>
    <div class="col-sm-4 align-self-end">
        ...
    </div>
</div>

Horizontal Alignment

Use the justify-content-start,justify-content-center, or justify-content-end class respectively to horizontally align items with a different position.

justify-content-start
justify-content-center
justify-content-end
HTML Preview
<!-- Horizontal Alignment -->
<div class="row justify-content-start">
    <div class="col-sm-4">
    ...
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-sm-4">
    ...
    </div>
</div>
<div class="row justify-content-end">
    <div class="col-sm-4">
    ...
    </div>
</div>
© Toner.
Design & Develop by Themesbrand