1. Home
  2. Grid
  3. Grid Document

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
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 
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
  <div class="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 
<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>
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 
<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>
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 
<div class="row">
  <div class="col-lg-2">1 of 3</div>
  <div class="col-auto">Auto width</div>
  <div class="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 
<div class="row">
  <div class="col">1 of 3</div>
  <div class="col-auto">Auto width</div>
  <div class="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 
<div class="row">
  <div class="col">column</div>
  <div class="col">column</div>
  <div class="col">column</div>
  <div class="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 
<div class="row">
  <div class="col-2">column</div>
  <div class="col-4">column</div>
  <div class="col-4">column</div>
  <div class="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 
<div class="row align-items-start h-150">
  <div class="col">column</div>
  <div class="col">column</div>
  <div class="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 
<div class="row align-items-center h-150">
  <div class="col">column</div>
  <div class="col">column</div>
  <div class="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 
<div class="row align-items-end h-150">
  <div class="col">column</div>
  <div class="col">column</div>
  <div class="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 
<div class="row h-150">
  <div class="col align-items-start">column</div>
  <div class="col align-items-center">column</div>
  <div class="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 
<div class="row justify-content-start">
  <div class="col-4">column</div>
  <div class="col-4">column</div>
</div>
Col 4
Col 4 
<div class="row justify-content-center">
  <div class="col-4">column</div>
  <div class="col-4">column</div>
</div>
Col 4
Col 4 
<div class="row justify-content-end">
  <div class="col-4">column</div>
  <div class="col-4">column</div>
</div>
Col 4
Col 4 
<div class="row justify-content-around">
  <div class="col-4">column</div>
  <div class="col-4">column</div>
</div>
Col 4
Col 4 
<div class="row justify-content-between">
  <div class="col-4">column</div>
  <div class="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 
<div class="row no-gutters">
  <div class="col-8">column</div>
  <div class="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 
<div class="row">
  <div class="col-4">column</div>
  <div class="col-4">column</div>

  <div class="w-100">.w-100 Force next columns to break to new line</div>

  <div class="col-4">column</div>
  <div class="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 
<div class="row">
  <div class="col-6 col-sm-3">column</div>
  <div class="col-6 col-sm-3">column</div>

  <div class="w-100 d-none d-md-block">.w-100 Force next columns to break to new line at md breakpoint and up</div>

  <div class="col-6">column</div>
  <div class="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 
<div class="row">
  <div class="col-md-4">column</div>
  <div class="col-md-4 offset-md-4">column</div>
</div>
col-md-3 offset-md-3
col-md-3 offset-md-3 
<div class="row">
	<div class="col-md-3 offset-md-3">column</div>
	<div class="col-md-3 offset-md-3">column</div>
</div>
col-md-6 offset-md-3 
<div class="row">
	<div class="col-md-6 offset-md-3">column</div>
</div>
Margin utilities
With the move to flexbox in v4, you can use margin utilities like .me-auto to force sibling columns away from one another.
.col-md-4
.col-md-4 .ms-auto 
<div class="row">
	<div class="col-md-4">column</div>
	<div class="col-md-4 ms-auto">column</div>
</div>
.col-md-5 .ml-md-auto
.col-md-5 .ml-md-auto 
<div class="row">
	<div class="col-md-5 ml-md-auto">column</div>
	<div class="col-md-5 ml-md-auto">column</div>
</div>
.col-auto .me-auto
.col-auto 
<div class="row">
	<div class="col-auto me-auto">column</div>
	<div class="col-auto">column</div>
</div>