logo-lightlogo-dark

Welcome Alex

hand-gif
Here’s what’s happening with your store today.

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