Loading...

###### Don't Miss Out! Out new update has been release.

###### Something you love is now on sale!

Buy now !

#### Grid

#### Grid options

Bootstrap grid system allow all six breakpoints, and any breakpoints you can customize.

| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | Extra extra large ≥1400px
--- | --- | --- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px
Class prefix | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-` | `.col-xxl-`
# of columns | 12
Gutter width | 1.5rem (.75rem on left and right)
Nestable | Yes
Offsets | Yes
Column ordering | Yes

#### Grid for column

You may use predefined grid classes. Using `.col-md-*` you can set the grid system.

col-md-1
col-md-2
col-md-2
col-md-3
col-md-4
col-md-5
col-md-7
col-md-6
col-md-6
col-md-8
col-md-4
col-md-9
col-md-3
col-md-10
col-md-2
col-md-12

#### Vertical alignment

You can use the `align-items-*` class to set the vertical alignment.

one column
two column
one column
two column
one column
two column

#### Horizontal alignment

You can use the `justify-content-*` class to set the horizontal alignment.

One column
Two column
One column
Two column
One column
Two column

#### Nesting

To nest your content with the default grid, add a new`.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column.

Level 1: .col-3
Level 2: .col-5
Level 2: .col-7
Level 1: .col-2
Level 1: .col-10
Level 2: .col-4

#### Order

Using `.order` class, you can set the order position.

First Item (order-3)
Second Item (order-first)
Third Item (order-last)
Fourth Item (order-2)
fifth Item (order-5)
sixth Item (order-4)

#### Offset

You can offset the grid column using `.offset-*` grid class.

col-5 offset-3
col-2 offset-2
col-4 offset-2
col-3 offset-2