Bootstrap grid system is robust flexbox grid to build responsive layouts of all shapes and sizes. Check some examples of Bootstrap grid examples.
On this page:Bootstrap’s grid system uses a set of containers, rows, and columns to layout and align content. It’s developed with flexbox and is fully responsive. Below is a Bootstrap grid system example and an in-depth look at how the grid comes together.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
The higher example generates three equal-width columns on small, medium, large, and extra large devices utilizing predefined bootstrap grid css classes. These columns are centered in the content with the parent .container
.
Breaking it down, here’s how it works:
.container
for a responsive pixel width or .container-fluid
for width: 100%
across all viewport and device sizes.padding
for controlling the space between them. This padding
is then checked on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.width
will automatically layout as equal width columns. For example, four examples of .col-sm
will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples..col-4
.width
s are set in percentages, so they’re always fluid and sized relative to their parent element.padding
to create the gutters between individual columns, however, you can remove the margin
from rows and padding
from columns with .no-gutters
on the .row
..col-sm-4
applies to small, medium, large, and extra large devices, but not the first xs
breakpoint)..col-4
) or Sass mixins for more semantic markup.While Bootstrap uses em
s or rem
s for defining most sizes, px
s are used for bootstrap grid CSS breakpoints and container wideness. It’s because the viewport width is in pixels.
Please notice how aspects of the Bootstrap grid system work across various 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 |
Use breakpoint-specific column classes for smooth column sizing without an specific numbered class like .col-sm-6
.
For example, here are two grid layouts that apply to every device and viewport, from xs
to xl
. Add an unspecified number of unit-less classes for each breakpoint you need and each column will be the same width.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
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.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Auto-layout for flexbox grid columns also means you can lock the width of one column and have the sibling columns automatically resize around it. You can use predefined grid classes, grid mixins, or inline widths. Remark that the other columns will resize no matter the width of the center column.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Apply col-{breakpoint}-auto
classes to size columns based on the real width of their content.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Create equal-width columns that span multiple rows by inserting a .w-100
where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100
with some responsive display utilities.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Bootstrap’s grid css includes five layers of predefined classes for developing mixed responsive layouts. Customize the size of your columns on small or large devices nevertheless you see fit.
For grids that are the equal from the smallest of devices to the largest, use the .col
and .col-*
classes. Specify a numbered class when you require an individually sized column; otherwise, feel free to stick to .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
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
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Don’t want your columns to accumulate in some grid tiers simply? Use a mixture of different classes for each tier as needed. See the sample below for a better idea of how does it work.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .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 can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the .row
and matching padding utilities on the .col
s. The .container
or .container-fluid
parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.
Here’s an example of customizing the Bootstrap grid at the large (lg
) breakpoint and above. We’ve increased the .col
padding with .px-lg-5
, counteracted that with .mx-lg-n5
on the parent .row
and then adjusted the .container
wrapper with .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
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. See Flexbugs #3 for more details.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
The gutters between columns in our predefined grid classes can be eliminated with .no-gutters
. This eliminates the negative margin
s from .row
and the horizontal padding
from all immediate children columns.
Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.
Need an edge-to-edge design? Drop the parent .container
or .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
In usage, here’s how it works. Note you can continue to use this with all different predefined grid classes.
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
If more than 12 columns are arranged within a single row, each group of extra columns will, as one unit, wrap on a new line.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Breaking columns to a new line in flexbox needs a small hack: add an element with width: 100%
anywhere you want to wrap your columns to a new line. Usually, this is accomplished with many .row
s, but not every implementation technique can account for this.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
You could also apply this break at specific breakpoints with responsive display utilities.
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
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.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
There are also responsive .order-first
and .order-last
classes that change the order
of an element by applying order: -1
and order: 13
(order: $columns + 1
), respectively. These classes can additionally be intermixed with the numbered .order-*
classes as demanded.
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
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.
Move columns to the right using .offset-md-*
classes. These classes increase the left margin of a column by *
columns. For example, .offset-md-4
moves .col-md-4
over four columns.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
In addition to column clearing at responsive breakpoints, you may need to reset offsets.
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
With the move to flexbox in v4, you can use margin utilities like .mr-auto
to force sibling columns away from one another.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
To nest your content with the default grid, add a new .row
and set of .col-sm-*
columns within an existing .col-sm-*
column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
If using source Sass files, you have the possibility of using Sass variables and mixins to generate custom, semantic, and responsive layouts. Predefined bootstrap grid classes use the same variables and mixins to implement a whole suite of ready-to-use classes for responsive layouts.
Variables and maps limit the amount of columns, the gutter width, and the media query point at which to begin floating columns. Use these variables to create the predefined grid classes documented above, as well as for the custom mixins listed below.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.
.example-container {
width: 800px;
@include make-container();
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Utilizing Bootstrap’s built-in grid Sass variables and maps, it’s potential to fully customize the predefined grid classes. Adjust the number of tiers, the media query dimensions, and the container widths.
The number of grid columns can be changed via Sass variables. $grid-columns
is used to produce the widths (in percent) of each individual column while $grid-gutter-width
allows breakpoint-specific widths that are divided fairly across padding-left
and padding-right
for the column gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you required just four grid tiers, you would update the $grid-breakpoints
and $container-max-widths
to something like this:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
If making any changes to the Sass variables or maps, you’ll have to save your modifications and recompile your project.