Bootstrap 4 Theme
Layout

Options for structuring your pages with Bootstrap, including global styles, required scaffolding, grid system, and more.

Grid

Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.

Options
Extra small
<544px 		Small
≥544px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 576px 720px 940px 1140px
Class prefix .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 1.875rem / 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
Example: Stacked-to-horizontal

1

2

3

4

5

6

7

8

9

10

11

12

col-md-8

col-md-4

col-md-4

col-md-4

col-md-4

col-md-6

col-md-6

Example: Mobile, tablet, desktop

col-xs-12 col-sm-6 col-md-8

col-xs-6 col-md-4

col-xs-6 col-sm-4

col-xs-6 col-sm-4

col-xs-6 col-sm-4

Example: Offsetting columns

col-md-4

 

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

 

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

 

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

 

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

Example: Nesting columns

col-sm-9

col-xs-8 col-sm-6

col-xs-4 col-sm-6

Example: Column ordering

col-md-9 col-md-push-3

col-md-3 col-md-pull-9