How it Works?
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. Below is an example and an in-depth look at how the grid comes together.
Columns and gutters
Number of Default Columns = 12
Column Default Gutter Width = 30px
Column Default Gutter Width = 30px
Grid options
While Bootstrap uses ems or rems for defining most sizes,pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size. See how aspects of the Bootstrap grid system work across multiple devices with a handy table
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None(auto) | 540px | 720px | 960px | 1140px |
| Class prefix |
.col-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
| # of columns | 12 | ||||
| Gutter width | 30px(15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Equal-width
For example,here are two grid layouts that apply to every device and viewport,from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
1 of 2
2 of 2
3 of 3
<divclass="row"><divclass="col">1 of 2</div><divclass="col">2 of 2</div><divclass="col">3 of 3</div></div>
Columns can be broken into multiple lines
Equal-width columns can be broken into multiple lines,but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border. There are workarounds for older browser versions,but they shouldn’t be necessary if you’re up-to-date.
Column
Column
Column
Column
<divclass="row"><divclass="col">Column</div><divclass="col">Column</div><divclass="w-100"></div><divclass="col">Column</div><divclass="col">Column</div></div>
Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes(as shown below),grid mixins,or inline widths. Note that the other columns will resize no matter the width of the center column.
1 of 3
2 of 3(wider)
3 of 3
<divclass="row"><divclass="col">1 of 3</div><divclass="col-6">2 of 3(wider)</div><divclass="col">3 of 3</div></div>
Variable width content
Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.
1 of 3
Auto width
3 of 3
<divclass="row"><divclass="col-lg-2">1 of 3</div><divclass="col-auto">Auto width</div><divclass="col-lg-2">3 of 3</div></div>
Variable width content
Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.
1 of 3
Auto width
3 of 3
<divclass="row"><divclass="col">1 of 3</div><divclass="col-auto">Auto width</div><divclass="col-lg-2">3 of 3</div></div>
Breakpoints
For grids that are the same from the smallest of devices to the largest,use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column;otherwise,feel free to stick to .col
col
col
col
col
<divclass="row"><divclass="col">column</div><divclass="col">column</div><divclass="col">column</div><divclass="col">column</div></div>
Breakpoints
For grids that are the same from the smallest of devices to the largest,use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column;otherwise,feel free to stick to .col
col-2
col-4
col-4
col-2
<divclass="row"><divclass="col-2">column</div><divclass="col-4">column</div><divclass="col-4">column</div><divclass="col-2">column</div></div>
Align items start
Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height as shown below.
Col
Col
Col
<divclass="row align-items-start h-150"><divclass="col">column</div><divclass="col">column</div><divclass="col">column</div></div>
Align items center
Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height as shown below.
Col
Col
Col
<divclass="row align-items-center h-150"><divclass="col">column</div><divclass="col">column</div><divclass="col">column</div></div>
Align items end
Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height as shown below.
Col
Col
Col
<divclass="row align-items-end h-150"><divclass="col">column</div><divclass="col">column</div><divclass="col">column</div></div>
Vertical Alignment
Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height as shown below.
Col
Col
Col
<divclass="row h-150"><divclass="col align-items-start">column</div><divclass="col align-items-center">column</div><divclass="col align-items-end">column</div></div>
Horizontal Alignment
Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height as shown below.
Col 4
Col 4
<divclass="row justify-content-start"><divclass="col-4">column</div><divclass="col-4">column</div></div>
Col 4
Col 4
<divclass="row justify-content-center"><divclass="col-4">column</div><divclass="col-4">column</div></div>
Col 4
Col 4
<divclass="row justify-content-end"><divclass="col-4">column</div><divclass="col-4">column</div></div>
Col 4
Col 4
<divclass="row justify-content-around"><divclass="col-4">column</div><divclass="col-4">column</div></div>
Col 4
Col 4
<divclass="row justify-content-between"><divclass="col-4">column</div><divclass="col-4">column</div></div>
No gutters
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
Col
Col
<divclass="row no-gutters"><divclass="col-8">column</div><divclass="col-4">column</div></div>
Column breaks
Breaking columns to a new line in flexbox requires a small hack:add an element with width:100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows,but not every implementation method can account for this.
Col
Col
Col
Col
<divclass="row"><divclass="col-4">column</div><divclass="col-4">column</div><divclass="w-100">.w-100 Force next columns to break to new line</div><divclass="col-4">column</div><divclass="col-4">column</div></div>
Column break at specific breakpoints
Breaking columns to a new line in flexbox requires a small hack:add an element with width:100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows,but not every implementation method can account for this.
Column
Column
Column
Column
<divclass="row"><divclass="col-6 col-sm-3">column</div><divclass="col-6 col-sm-3">column</div><divclass="w-100 d-none d-md-block">.w-100 Force next columns to break to new line at md breakpoint and up</div><divclass="col-6">column</div><divclass="col-6">column</div></div>
Offsetting columns
You can offset grid columns in two ways:our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
col-md-4
col-md-4 offset-md-4
<divclass="row"><divclass="col-md-4">column</div><divclass="col-md-4 offset-md-4">column</div></div>
col-md-3 offset-md-3
col-md-3 offset-md-3
<divclass="row"><divclass="col-md-3 offset-md-3">column</div><divclass="col-md-3 offset-md-3">column</div></div>
col-md-6 offset-md-3
<divclass="row"><divclass="col-md-6 offset-md-3">column</div></div>
Margin utilities
With the move to flexbox in v4,you can use margin utilities like .mr-auto to force sibling columns away from one another.
.col-md-4
.col-md-4 .ml-auto
<divclass="row"><divclass="col-md-4">column</div><divclass="col-md-4 ml-auto">column</div></div>
.col-md-5 .ml-md-auto
.col-md-5 .ml-md-auto
<divclass="row"><divclass="col-md-5 ml-md-auto">column</div><divclass="col-md-5 ml-md-auto">column</div></div>
.col-auto .mr-auto
.col-auto
<divclass="row"><divclass="col-auto mr-auto">column</div><divclass="col-auto">column</div></div>