Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns.
Sample Code
Output
How it works
Our grid supports six responsive breakpoints. Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it ( .col-sm-4 applies to sm, md, lg, xl, and xxl).
Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width, .container-fluid for width: 100% across all viewports and devices, or a responsive container (.container-md) for a combination of fluid and pixel widths.
Rows are wrappers for columns. Each column has horizontal padding for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side.
Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span ( .col-4 spans four).
Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with. gx-* classes, vertical gutters with .gy-*, or all gutters with. g-* classes. g-0 is also available to remove gutters.
Grid options
Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra-large (xl)
Extra extra-large (xxl)
xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Container max-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)
Custom gutters
Yes
Nestable
Yes
Column ordering
Yes
Bootstrap Grid Equal Width
For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
Sample Code
Output
Bootstrap Grid 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.
Sample Code
Output
Bootstrap Grid Variable Width Content
col-{breakpoint}-auto classes to size columns based on the natural width of their content.
Sample Code
Output
Bootstrap Grid Responsive Classes
Customize the size of your columns on extra small, small, medium, large, or extra-large devices however you see fit.
Bootstrap Grid All 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.
Sample Code
Output
Bootstrap Grid Stacked to Horizontal
Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).
Sample Code
Output
Bootstrap Grid Mix and Match
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.
Sample Code
Output
Bootstrap Grid Row Columns Example 1
Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout.
Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a shortcut. With .row-cols-auto you can give the columns their natural width.
Sample Code
Output
Bootstrap Grid Row Columns Example 2
Sample Code
Output
Bootstrap Grid Row Columns Example 3
Sample Code
Output
Bootstrap Grid Row Columns Example 4
Sample Code
Output
Bootstrap Grid Nesting
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.