Need Help ?

Submit enquiry here Buy Now

Grid

  2. Ui Kits
  3. Grid
Grid Options
Bootstrap grid allows building an equal height flexbile blocks easily

While Bootstrap uses em or rem for defining most sizes, px are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

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 Column

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any .row.

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
<!--  Grid Column Copy begin -->
          <div class="row">
            <div class="col-md-1 text-center">
              <span >
                 col-md-1
              </span>
            </div>
            <div class="col-md-2 text-center">
              <span >
                 col-md-2
              </span>
            </div>
            <div class="col-md-2 text-center">
              <span >
                 col-md-2
              </span>
            </div>
            <div class="col-md-3 text-center">
              <span >
                 col-md-3
              </span>
            </div>
            <div class="col-md-4 text-center">
              <span >
                 col-md-4
              </span>
            </div>
            <div class="col-md-5 text-center">
              <span >
                 col-md-5
              </span>
            </div>
            <div class="col-md-7 text-center">
              <span >
                 col-md-7
              </span>
            </div>
            <div class="col-md-6 text-center">
              <span >
                 col-md-6
              </span>
            </div>
            <div class="col-md-6 text-center">
              <span >
                 col-md-6
              </span>
            </div>
            <div class="col-md-8 text-center">
              <span >
                 col-md-6
              </span>
            </div>
            <div class="col-md-4 text-center">
              <span >
                 col-md-6
              </span>
            </div>
            <div class="col-md-9 text-center">
              <span >
                 col-md-9
              </span>
            </div>
            <div class="col-md-3 text-center">
              <span >
                 col-md-3
              </span>
            </div>
            <div class="col-md-10 text-center">
              <span >
                 col-md-10
              </span>
            </div>
            <div class="col-md-2 text-center">
              <span >
                 col-md-2
              </span>
            </div>
            <div class="col-md-12 text-center">
              <span >
                 col-md-12
              </span>
            </div>
          </div>
          <!--  Grid Column Copy end -->
Row columns

Use the responsive.row-cols-*classes to quickly set the number of columns that best render your content and layout. Whereas normal .col-*classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .rowas a default for contained columns. With.row-cols-autoyou can give the columns their natural width.

col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-4 col-lg-2
col-4 col-lg-2
col-4 col-lg-2
col-4 col-lg-2
col-4 col-lg-2
col-4 col-lg-2
<!--  Grid Column Copy begin -->
          <div class="row">
            <div class="col-md-1 text-center">
              <span >
                 col-md-1
              </span>
            </div>
            <div class="col-md-2 text-center">
              <span >
                 col-md-2
              </span>
            </div>
            <div class="col-md-2 text-center">
              <span >
                 col-md-2
              </span>
            </div>
            <div class="col-md-3 text-center">
              <span >
                 col-md-3
              </span>
            </div>
            <div class="col-md-4 text-center">
              <span >
                 col-md-4
              </span>
            </div>
            <div class="col-md-5 text-center">
              <span >
                 col-md-5
              </span>
            </div>
            <div class="col-md-7 text-center">
              <span >
                 col-md-7
              </span>
            </div>
            <div class="col-md-6 text-center">
              <span >
                 col-md-6
              </span>
            </div>
            <div class="col-md-6 text-center">
              <span >
                 col-md-6
              </span>
            </div>
            <div class="col-md-8 text-center">
              <span >
                 col-md-6
              </span>
            </div>
            <div class="col-md-4 text-center">
              <span >
                 col-md-6
              </span>
            </div>
            <div class="col-md-9 text-center">
              <span >
                 col-md-9
              </span>
            </div>
            <div class="col-md-3 text-center">
              <span >
                 col-md-3
              </span>
            </div>
            <div class="col-md-10 text-center">
              <span >
                 col-md-10
              </span>
            </div>
            <div class="col-md-2 text-center">
              <span >
                 col-md-2
              </span>
            </div>
            <div class="col-md-12 text-center">
              <span >
                 col-md-12
              </span>
            </div>
          </div>
          <!--  Grid Column Copy end -->
Vertical alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
<!--  Vertical alignment Copy begin -->
          <div class="row">
            <div class="col align-self-start">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col align-self-center">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col align-self-end">
              <span >
                 One of three columns
              </span>
            </div>
          </div>
          <div class="row align-self-start">
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
          </div>
          <div class="row align-self-center">
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
          </div>
          <div class="row align-self-end">
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
          </div>;
          <!--  Vertical alignment Copy end -->
Nesting Column

Use flexbox alignment utilities to vertically and horizontally align columns.

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
<!--  Nesting Column Copy begin -->
          <div class="row">
            <div class="col-8 col-sm-6">
              <span >
                 Level 2: col-8 col-sm-6
              </span>
            </div>
            <div class="col-4 col-sm-6">
              <span >
                 Level 2: .col-4 .col-sm-6
              </span>
            </div>
          </div>
          <!--  Nesting Column Copy end -->
Order

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). Includes support for 1 through 12 across all five grid tiers.

First, but unordered
Second, but last
Third, but first
First, but last
Second, but unordered
Third, but first
<!--  Order Copy begin -->
          <div class="row">
            <div class="col">
              <span >
                 First, but unordered
              </span>
            </div>
            <div class="col order-12">
              <span >
                 Second, but last
              </span>
            </div>
            <div class="col order-1">
              <span >
                 Third, but first
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col order-last">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col">
              <span >
                 One of three columns
              </span>
            </div>
            <div class="col order-first">
              <span >
                 One of three columns
              </span>
            </div>
          </div>
          <!--  Order Copy end -->
Offset

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 
<!--  Offset Copy begin -->
          <div class="row">
            <div class="col-md-4">
              <span >
                 col-md-4
              </span>
            </div>
            <div class="col-md-4 offset-md-4">
              <span >
                 col-md-4 offset-md-4
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3 offset-md-3">
              <span >
                 col-md-3 offset-md-3
              </span>
            </div>
            <div class="col-md-3 offset-md-3">
              <span >
                 col-md-3 offset-md-3
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 offset-md-3">
              <span >
                 col-md-6 offset-md-3
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-5 col-md-6">
              <span >
                 col-sm-5 col-md-6
              </span>
            </div>
            <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">
              <span >
                 col-sm-5 offset-sm-2 col-md-6 offset-md-0
              </span>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6 col-md-5 col-lg-6">
              <span >
                 col-sm-6 col-md-5 col-lg-6
              </span>
            </div>
            <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">
              <span >
                 col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0
              </span>
            </div>
          </div>
          <!--  Offset Copy end -->