Grid system is a mobile-first twelve column system built with flexbox and is fully responsive.
Breakpoints Doc
Bootstrap grid supports six responsive breakpoints. Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it (e.g., .col-sm-4 applies to sm, md, lg, xl, and xxl).
Basic style for column .row > *
Column gutter
.col
.col-sm
.col-md
.col-lg
.col-xl
.col-xxl
The 12 column system Doc
There are 12 template columns available per row. Column classes indicate the number of template columns to span (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.
1
2
3
4
5
6
7
8
9
10
11
12
Grid Examples
Equal-width Doc
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
Setting one column width Doc
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
All breakpoints Doc
col
col
col
col
col-8
col-4
Stack horizontally Doc
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Mix and match Doc
.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Example 1
.col .col-sm-6 .col-md-7 .col-lg-8 .col-xl-10 .col-xxl-11
.col .col-sm-6 .col-md-5 .col-lg-4 .col-xl-2 .col-xxl-1