- 2
Cart
Order Total : $1000.00
- Go to your cartCheckout
- 4
15
Ava Davis
Admin
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 | |||||
| Offsets | Yes | |||||
| Column ordering | Yes | |||||
Column Grid
Use predefined grid classes using .col-md-* class to set the grid system.
col-md-1
col-md-2
col-md-2
col-md-3
col-md-4
col-md-
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
Use align-items-* class to set vertical alignment.
one column
two column
one column
two column
one column
two column
Horizontal Alignment
Set horizontal alignment using justify-content-* class.
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 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
Offset the grid column using.offset-grid class.
col-5 offset-3
col-2 offset-2
col-4 offset-2
col-3 offset-2