##### Mannat Themes

We Design and Develop Clean and High Quality Web Applications

Upgrade your plan

#### Grids

Today: Jan 11

#### Grid options

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
--- | --- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
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 | 20px (10px on each side of a column)
Nestable | Yes
Offsets | Yes
Column ordering | Yes

#### Sm Grid-Example

Columns collapse at 576px

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

#### Md Grid-Example

Columns collapse at 768px

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

#### Lg Grid-Example

Columns collapse at 992px

.col-lg-6
.col-lg-6

#### Xl Grid-Example

Columns collapse at 1200px

.col-xl-4
.col-xl-4
.col-xl-4

#### Grid-Example

Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-12

#### Offset (Max-Auto)

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. With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.

.col-sm-8 offset-sm-2
.col-sm-3 ml-auto
.col-sm-3 ml-auto
.col-sm-3
.col-sm-3 offset-sm-3