Fiva - Bootstrap 4 Admin Dashboard Template

Grid Options

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
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
Column ordering	Yes

Basic Grid

One of three columns

Auto-layout Columns

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Equal-width multi-line

col

Setting one column width

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

Variable width content

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Responsive classes (All breakpoints)

col

col-8

col-4

Responsive classes (Stacked to horizontal)

col-sm-8

col-sm-4

col-sm

Responsive classes (Mix and match)

.col-md-8

.col-6 .col-md-4

.col-6

Responsive classes (Gutters)

Custom column padding

Responsive classes (Row columns)

Column

Vertical Alignment

One of three columns

Horizontal alignment

One of two columns

No Gutters

.col-sm-6 .col-md-8

.col-6 .col-md-4

Column Wrapping

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

Column Breaks

.col-6 .col-sm-3

Order classes

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

Offset classes

.col-md-4

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

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

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

Margin utilities

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

Nesting

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6