Powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
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 |
|
---|---|---|---|---|---|---|
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 | 1.5rem (.75rem on left and right) | |||||
Nestable | Yes | |||||
Column ordering | Yes |
Tips: Bootstrap v5 added one more grid breakpoint class xxl for ≥1400 breakpoint.
Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Gutters are the gaps between column content, created by horizontal padding and vertical margin. bootstrap set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.Gutters start at 1.5rem (24px)
wide.
<!-- Gutter width 3rem with gx-5 -->
<div class="container">
<div class="row gx-5">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<!-- Gutter width 3rem with gx-1 -->
<div class="row gx-3">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
Class | Values |
---|---|
class="row g-/gy-/gx-[Value]" |
1/2/3/4/5 |
Use .order-
classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2)
. Includes support for 1 through 12 across all five grid tiers.you can use.order-xxl-
for xxl width.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Class | Values |
---|---|
class="col order-[value]" |
1 / 2 / 3 / 4 / 5 |
Use the responsive .row-cols-*
classes to quickly set the number of columns that best render your content and layout.
<!-- Column-5 -->
<div class="container">
<div class="row row-cols-xl-5">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<!-- Column-7 -->
<div class="row row-cols-xl-7">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<!-- Column-9 -->
<div class="row row-cols-xl-9">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>