Grid system

• Edit this page
• Revision history
• Questions or comments?

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.

• Place rows within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Place content within columns
  • Only columns can be immediate children of rows
  • Columns create gutters (gaps between column content) via CSS padding:. That padding is offset in rows for the first and last column via a negative margin on a .row
• Specify the number to span (of twelve available columns) in order to create grid columns. For example, for three equal columns, use three .col-xs-4
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices
  • So applying any .col-md- class to an element affects the styling on medium devices, as well as on large devices if a .col-lg- class is not present
• Create fully fluid layouts (meaning the website stretches the entire width of the viewport)
  • To do this, wrap grid content in a container element with padding: 0 15px; to offset the margin: 0 -15px; on a .row

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.

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

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

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

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

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

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

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

• Reflowing content around grids

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

Date modified:

2019-04-11