Gird system

It's build width Flexbox and is fully responsive. Allows up to 12 columns across the page.

if you do not want to use all 12 collumn individually, you can group the columns together to create wider columns;

col-1

col-3

col-4

col-8

col-6

col-12

Grid Classes

Grid system has four classes:

.col- (extra small devices - screen width less than 576px)
.col-md- (medium devices - screen width equal to or greater than 812px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

Equal-width

.col

Setting one column width

.col

.col-6

.col

.col-5

.col

Variable width content

.col-lg-2

.col-md-auto

.col-lg-2

.col

.col-md-auto

.col-lg-4

Responsive class

.col-12 .col-md-8

.col-6 .col-md-4

Alignment

.row .justify-content-start

.col-4

.row .justify-content-center

.col-4

.row .justify-content-end

.col-4

.row .justify-content-around

.col-4

.row .justify-content-between

.col-4

Order class

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., order-1.order-md-2 )

1 -> 2 -> 3

1.col.order-lg-2

2.col.order-md-12

3.col.order-xl-1

Margin utilities

.col-4

.col-4.ml-auto

.col-lg-3.ml-auto

.col-auto.mr-auto

.col-auto