• Notifications
      You have 2 unread messages

    • Delivery processing 10 min.

    • Order Complete1 hr

    • Tickets Generated3 hr

    • Delivery Complete6 hr

    • All notification
    • Erica Hughes

      There are many variations of passages...

      1 hr ago

    • Kori Thomas

      There are many variations of passages...

      58 mins ago

    • Ain Chavez

      There are many variations of passages...

      32 mins ago

    • Mark all as read
  • Elana SaintAdmin
    • Profile
    • Home
    • Inbox
    • Taskboard
    • Settings
    • Log in
  2. Ui Kits
  3. Grid

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