Language selection

Grid system

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use a grid system (a series of rows and columns that house content) to create page layouts.

Design and coding

Basic use

Responsive grid options

Use a grid system to create a responsive, mobile first, fluid grid system. It scales appropriately up to 12 columns, as the device or viewport size increases.

Responsive options
Extra small 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
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of columns 12
Column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Basic grid row

Use a single set of .col-md-* grid classes to create a basic grid system that starts out stacked on mobile and tablet devices (the extra small to small range). It then becomes horizontal on desktop (medium) devices. Place grid columns in any .row.

Appearance
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Code
<div class="row">
  <div class="col-md-2">
   ...
  </div>
  <div class="col-md-2">
   ...
  </div>
  <div class="col-md-2">
   ...
  </div>
  <div class="col-md-2">
   ...
  </div>
  <div class="col-md-2">
   ...
  </div>
  <div class="col-md-2">
   ...
  </div>
</div>

<div class="row">
  <div class="col-md-8">
   ...
  </div>
  <div class="col-md-4">
   ...
  </div>
</div>

<div class="row">
  <div class="col-md-4">
   ...
  </div>
  <div class="col-md-4">
   ...
  </div>
  <div class="col-md-4">
   ...
  </div>
</div>

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

Fluid container

Use to turn any fixed width grid layout into a full width layout. Change the outermost .container to .container-fluid.

Code
<div class="container-fluid">
	<div class="row">
		...
	</div>
</div>

Enhanced use

Mobile and desktop

Use to prevent columns from simply stacking in smaller devices. Use the extra small and medium device grid classes. Add .col-xs-* .col-md-* to the columns. Refer to the example below for a better idea of how this works.

Appearance
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Code
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">...</div>
  <div class="col-xs-6 col-md-4">...</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">...</div>
  <div class="col-xs-6 col-md-4">...</div>
  <div class="col-xs-6 col-md-4">...</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">...</div>
  <div class="col-xs-6">...</div>
</div>

Mobile, tablet, desktops

Use to create even more dynamic and powerful layouts with tablet .col-sm-* classes.

Appearance
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Code
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">
   ...
  </div>
  <div class="col-xs-6 col-md-4">
   ...
  </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">
   ...
  </div>
  <div class="col-xs-6 col-sm-4">
   ...
  </div>

  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-4">
   ...
  </div>
</div>

Responsive column resets

Use to force breakpoints in content. With the four tiers of grids available, issues can arise. At certain breakpoints, columns don't always clear properly for example, if one column is taller than the other. To fix that, use a combination of a .clearfix and the invisible and visible classes.

Appearance
.col-xs-6 .col-sm-3
Resize the viewport or check it out on a cell phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Code
<div class="row">
  <div class="col-xs-6 col-sm-3">
   ...
  </div>
  <div class="col-xs-6 col-sm-3">
   ...
  </div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3">
   ...
  </div>
  <div class="col-xs-6 col-sm-3">
   ...
  </div>
</div>
Reset offsets, pushes, and pulls

Use reset offsets, pushes, or pulls in addition to column clearing at responsive breakpoints. Resets are available for only medium and large grid tiers since they start at the (second) small grid tier. Refer to this in action in the grid example.

<div class="row">
	<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
	<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
	<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
	<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Offsetting columns

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

Appearance
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Code
<div class="row">
  <div class="col-md-4">
   ...
  </div>
  <div class="col-md-4 col-md-offset-4">
   ...
  </div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">
   ...
  </div>
  <div class="col-md-3 col-md-offset-3">
   ...
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
   ...
  </div>
</div>

Nesting columns

Use to nest content with the default grid. Add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.

Appearance

Level 1: .col-md-9

Level 2: .col-md-6
Level 2: .col-md-6
Code
<div class="row">
  <div class="col-md-9">
   <div class="row">
    <div class="col-md-6">
     ...
    </div>
    <div class="col-md-6">
     ...
    </div>
   </div>
  </div>
</div>

Column ordering

Use to easily change the order of built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

Appearance
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Code
<div class="row">
	<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
	<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Add-on features

Additional add-on features and behaviours are available.

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: