Grid

  2. Ui Kits
  3. 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
Class Value of the class
.align-items-* start / center / end / baseline / stretch

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
Class Value of the class
.justify-content-* start / center / end / around / between

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)
Class Value of the class
.order-* first / 2 / 3 / 4 / 5 / last

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
Class Value of the class
.offset-* 1 / 2 / ... / 11 / 12