Grid

  • 3
    Notifications
    • user

      Emay Walter liked your post

      10 minutes ago
    • user

      Allie Gratershared your post

      5 hours ago
    • user

      Colin Sikcommented on your post

      yesterday
    • Check all
  • 2
    user
    Jane Cooper

    active

    • user

      Hello.how are you?

    • user

      Hi, i'm fine.what about you?

    • user

      I am facing js issue can you help me?

    • user

      Sure, i will help you.

  • 2
    Cart
    empty
    Oops! Your cart empty!!!
  • profile

    Wade Warren

    UI Designer
user

Wade Warren

UI Designer

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