CSS Grid

Create layouts of various shapes and sizes by employing a 12-column system with a comprehensive set of responsive grid utilities.

How it works

This is how the parts of the grid system collaborate with each other.

Our 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). This means you can control container and column sizing and behavior by each breakpoint.
Containers keep content in the center while providing horizontal padding. If you need a responsive pixel width, use .container. .container-fluid allows you to set width: 100% for all viewports and devices, and you can use a responsive container (such as .container-md) to use both pixel and fluid widths.
Rows serve as columns' wrappers. Every column has a gutter, aka horizontal padding, that manages the space between them. The padding's then counteracted on rows that have negative margins to make sure that the content in the columns is lined up on the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.
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 (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.

Keep in mind the restrictions that come with flexbox, such as being unable to utilize certain HTML elements for flex containers.

Example

.col-sm

This example makes three columns that are the same width on small, medium, large, and extra large devices by utilizing the predefined grid class. The columns are then put in the middle of the page with the .container parent.

Grid options

Bootstrap's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:

Extra small ( xs)
Small (sm )
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

Each of these breakpoints have their own unique features, which include modifiers, containers, and unique class prefixes. The grid changes across the breakpoints in the following ways:

	xs < 576px	sm ≥ 576px	md ≥ 768px	lg ≥ 992px	xl ≥ 1200px	xxl ≥ 1400px
Max container width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	12
# of columns	2rem (1rem on left and right)
Gutter width	Yes
Nestable	Yes
Column ordering	Yes

Auto-layout columns

Breakpoint specific column classes make it easier to resize columns without needing a specific column class such as .col-sm-6.

Equal-width

The grid layout below fits all devices and viewports between xs to xl. Each column stays the same width, even when you add unitless classes.

.col

Setting one column width

Using auto-layout for flexbox grid columns also lets you set the width for one column and have the others resize automatically to fit it. Choose between grid mixins, inline widths, or predefined grid classes (as seen in the example below).

.col

.col-6

.col

.col-5

.col

Note: No matter what size you set the center column to, other columns will still size themselves.

Variable-width content

col-{breakpoint}-auto classes set column sizes based on their content's width.

.col .col-lg-2

.col-md-auto

.col .col-lg-2

.col

.col-md-auto

.col.col-lg-2

Equal-width multi-row

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. You can make responsive breaks by adding .w-100 and responsive display utilities.

.col

Responsive classes

The grid system is adaptable for any breakpoints that you make, and the six default breakpoints as well. You can make the columns fit devices that range from extra small to extra large.

All breakpoints

.col and .col-* classes work the best on grids that don't change in size, no matter the size of the device. If you need a column in a select size, make sure to name a numbered class. If you don't, use .col.

.col

.col-8

.col-4

Stacked to horizontal

Make a grid system that starts out stacked on top of each other but shifts to a horizontal view upon hitting the small breakpoints (sm) by using the .col-sm-*.

Mix and match

You can also use different classes together for each tier, depending on your needs. The example underneath shows how to apply this.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Gutters

You can maintain a gutter's size and shape by using negative margin utility classes and breakpoint-specific padding. Change a row's gutters by putting padding utilities on the .cols and a matching negative margin utility on the .row. You might need to adjust the .container-fluid or the .container to prevent overflow—you can do that by using the corresponding padding utility.

You can see this in action in the example below. Note how we grew the .col padding by using .px-lg-5, .mx-lg-n5 on the parent row, and .px-lg-5 on the .container wrapper.

.col .py-3 .px-lg-5

Row columns

row-cols-* are used to set the number of columns that render your content and layout. While regular .col-* classes are for individual columns (like .col-md-4), row columns classes are on the parent .row. These classes can be used to dictate card layouts or make grid layouts.

.col

.col-6

.col

Alignment

Flex alignment utilities can be used to align columns both horizontally and vertically. You can see a few different applications of this in practice below.

Vertical alignment

.col

.col .align-self-start

.col .align-self-center

.col .align-self-end

Horizontal alignment

.col-4

No gutters

You can remove gutters between columns in predefined grid classes by using .no-gutters, which takes the horizontal padding from every immediate children column and negative margins from .row.

Below is the source code for these styles. Column overrides are accessible and visible only to the first children columns and targeted by an attribute selector, which makes for a more specific selector. However, you can still modify column padding with spacing utilities.

If you want a design that expands from one edge to the other, get rid of the parent .container or .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;
  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

This is what it looks like in action. You can use this with the other predefined grid classes, such as responsive tiers, column widths, etc.

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

Column wrapping

When you put more than 12 columns on a single row, all of the extra columns will wrap onto a new line as one unit.

Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-9

.col-4

.col-6

Subsequent columns continue along the new line.

Column breaks

When you want to break columns to a new line in flexbox, add an element that has width: 100% in the area where you want your columns to go to a new line. While this would usually be done by using .rows, not every application can work with this in mind.

.col-6 .col-sm-3

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4

Reordering

Order classes

.order- classes help set your content's visual order. Because the classes are responsive, you can order them by breakpoint (example: .order-1.order-md-2). This class has support for 1 through 12 over each grid tier.

1st div

.col

2nd div

.col .order-12

3rd div

.col .order-1

You can also use .order-first and .order-last classes to change an element's order. Use order: -1 and order: 13 (order: $columns + 1). These classes can be combined with numbered .order-* classes.

1st div

.col .order-last

2nd div

.col

3rd div

.col .order-first

Offsetting columns

Grid columns can be offset with margin utilities or responsive .offset- grid classes. The one that you'll use will depend on your needs; the classes are sized to fit columns, and margins work better with layouts where you have a variable offset width.

Offset classes

Columns can be moved to the right with .offset-md-* classes. They work by increasing a column's left margin by an amount of columns that you specify (such as .offset-md-4, which will move .col-md-4 over by four columns).

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

You may need to reset offsets as well as clear columns at responsive breakpoints. You can see this in the example below.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Margin utilities

Use margin utilities like .mr-auto to move sibling columns from each other.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

Nesting

You can nest your content with the default grid by adding a new .row and some .col-sm-* columns inside a current .col-sm-* column. Nested rows need 12 columns at the most, but you don't need to use all of them.

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.