Josephin Doe

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

#### Bootstrap Grid System

lorem ipsum dolor sit amet, consectetur adipisicing elit

##### Grid Options

lorem ipsum dolor sit amet, consectetur adipisicing elit

While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s 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
--- | --- | --- | --- | --- | ---
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 | 30px (15px on each side of a column)
Nestable | Yes
Offsets | Yes
Column ordering | Yes

##### Stacked to Horizontal

lorem ipsum dolor sit amet, consectetur adipisicing elit

Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any `.row`.

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-8
col-md-4
col-md-4
col-md-4
col-md-4
col-md-6
col-md-6

##### Mobile And Desktop

lorem ipsum dolor sit amet, consectetur adipisicing elit

Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.

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

##### Vertical Alignment

lorem ipsum dolor sit amet, consectetur adipisicing elit

Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.

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

##### Offsetting Column

lorem ipsum dolor sit amet, consectetur adipisicing elit

Move columns to the right using `.*-auto` classes. These classes increase the left margin of a column by `*` columns. For example, `.ms-auto` moves `.col-md-4` over four columns.

.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-md-6 . m-auto

##### Push and pull

lorem ipsum dolor sit amet, consectetur adipisicing elit

Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes.

.col-md-9 .push-md-3
.col-md-3 .pull-md-9

##### Nesting

lorem ipsum dolor sit amet, consectetur adipisicing elit

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

Level 1: .col-9
Level 2: .col-sm-8
Level 2: .col-sm-4

##### Flex Order

lorem ipsum dolor sit amet, consectetur adipisicing elit

Use flexbox utilities for controlling the visual order of your content.

First, but unordered
Second, but last
Third, but first