• Email
    • Chat
    • Feather Icon
    • Widgets

    • You have 3 Notifications4

    • Delivery processing

      10 minutes ago

    • Order Complete

      1 hour ago

    • Tickets Generated

      3 hour ago

    • Delivery Complete

      6 hour ago
    • Ain Chavez

      Lorem Ipsum is simply dummy...

      32 mins ago

    • Erica Hughes

      Lorem Ipsum is simply dummy...

      58 mins ago

    • Kori Thomas

      Lorem Ipsum is simply dummy...

      1 hr ago

    • See All
New
Emay Walter

Human Resources Department

  • 19.8k

    Follow

  • 2 year

    Experince

  • 95.2k

    Follower

Grid

  1. Home
  2. Base
  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
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
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
Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
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
Horizontal alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
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
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
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
icon-drupal