Bootstrap grid system

Bootstrap grid system is robust flexbox grid to build responsive layouts of all shapes and sizes. Check some examples of Bootstrap grid examples.

How it works

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.

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:

Containers give a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.

Rows are wrappers for columns. Each column has horizontal 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.

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

Thankfulness to flexbox, grid columns without a specified 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.

Column classes show the number of columns you would like to use out of the potential 12 per row. So, if you need three equal-width columns, you can use .col-4.

Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.

Columns have horizontal 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.

To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.

Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).

You can use predefined grid classes (like .col-4) or Sass mixins for more semantic markup.

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs 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

Auto-layout columns

Use breakpoint-specific column classes for smooth column sizing without an specific numbered class like .col-sm-6.

Equal-width

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.

Setting one column width

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.

Equal-width multi-row

Create equal columns that span multiple rows by including 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.

Responsive classes

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.

All breakpoints

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.

Mix and match

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.

.col-12 .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

<!-- Stack the columns on mobile by making one full-width and the other half-width --><divclass="row"><divclass="col-12 col-md-8">.col-12 .col-md-8</div><divclass="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 --><divclass="row"><divclass="col-6 col-md-4">.col-6 .col-md-4</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div></div><!-- Columns are always 50% wide, on mobile and desktop --><divclass="row"><divclass="col-6">.col-6</div><divclass="col-6">.col-6</div></div>

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

<divclass="container"><divclass="row align-items-start"><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div></div><divclass="row align-items-center"><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div></div><divclass="row align-items-end"><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div></div></div>

One of three columns

One of three columns

One of three columns

<divclass="container"><divclass="row"><divclass="col align-self-start">
One of three columns
</div><divclass="col align-self-center">
One of three columns
</div><divclass="col align-self-end">
One of three columns
</div></div></div>

Horizontal alignment

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

<divclass="container"><divclass="row justify-content-start"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-center"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-end"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-around"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-between"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div></div>

No gutters

The gutters between columns in our predefined grid classes can be eliminated with .no-gutters. This eliminates the negative margins from .row and the horizontal padding from all immediate children columns.

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

<divclass="row"><divclass="col-9">.col-9</div><divclass="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div><divclass="col-6">.col-6<br>Subsequent columns continue along the new line.</div></div>

Column breaks

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 .rows, but not every implementation technique can account for this.

<divclass="row"><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><!-- Force next columns to break to new line at md breakpoint and up --><divclass="w-100 d-none d-md-block"></div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div></div>

Reordering

Bootstrap grid order classes

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.

First, but unordered

Second, but last

Third, but first

<divclass="container"><divclass="row"><divclass="col">
First, but unordered
</div><divclass="col order-12">
Second, but last
</div><divclass="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.

First, but last

Second, but unordered

Third, but first

<divclass="container"><divclass="row"><divclass="col order-last">
First, but last
</div><divclass="col">
Second, but unordered
</div><divclass="col order-first">
Third, but first
</div></div></div>

Bootstrap grid offset

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.

Offset classes

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.

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. 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).

Sass mixins

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

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.

Mixins

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@includemake-row();// Make the element grid-ready (applying everything but the width)@includemake-col-ready();@includemake-col($size,$columns:$grid-columns);// Get fancy by offsetting, or changing the sort order@includemake-col-offset($size,$columns:$grid-columns);

Example usage

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.

Customizing the grid

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.

Columns and gutters

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;

Grid tiers

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: