grid.less

1
2
3
1
1
2
1
2
3
4
1
2
3
4
5
6
7
8
9
10
11
12

Different grids for different screen sizes

By default Bootstrap offers the option to set multiple grid classes, thus allowing to describe different grid behaviour for multiple screen sizes.

The global .col- class works for all screens. .col-medium and .col-large are optional and will change grid appearance for their related screen sizes. .col-medium handles medium sized screens, .col-large is set to handle desktop and laptop resolutions.

Tiny devices Phones (<768px) Small devices Tablets (>768px) Medium devices Desktops (>992px) Large devices Desktops (>1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 728px 940px 1170px
Class prefix .col- .col-medium- .col-large-
# of columns 12
Max column width Auto ~60px ~78px ~98px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

Rule of thumb for grid classes:

  • .col- = small screens
  • .col-medium- = medium screens (optional)
  • .col-large- = large screens (optional)

The following column will appear different for all three screen sizes. It will cover half the width on small screens, one third for medium and one quarter for large screens.

col-6 col-medium-4 col-large-3
<div class="row">
  <div class="col-6 col-medium-4 col-large-3">...</div>
</div>

Regular grid columns

The grid layout module always contains a maximum of 12 cells within a row of the grid. When the limit of 12 cells is reached, the grid requires a new row. Furthermore a grid can not exists without a row root node.

Dividing a row into cells works like this:

3 columns
6 columns
3 columns
<div class="row">
  <div class="col-3">...</div>
  <div class="col-6">...</div>
  <div class="col-3">...</div>
</div>

Nesting columns

Each column can contain new rows, wich enables nesting:

3 columns
6 columns
5 columns
7 columns
3 columns
<div class="row">
  <div class="col-3">...</div>
  <div class="col-6">
    <div class="row">
      <div class="col-5">...</div>
      <div class="col-7">...</div>
    </div>
  </div>
  <div class="col-3">...</div>
</div>

Offsetting columns

Columns can be offset within a row. Always maintain the maximum number of 12 slots per row, even when offsetting a coulum.

Offsetting columns only works for large screens!

5 columns - offset 6
<div class="row">
  <div class="col-5 col-offset-6">...</div>
</div>

Reordering columns

The order of columns can be changed by pushing and pulling within their shared row.

Reordering columns only works for large and medium screens!

1st column
2nd column
<div class="row">
  <div class="col-5 col-push-7">1st column</div>
  <div class="col-7 col-pull-5">2nd column</div>
</div>

LESS mixins for grids

Bootstraps grid related mixins can be used without any modifications