• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

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

Horizontal Alignment

Set horizontal alignment using justify-content-* class.

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 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

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