Bootstrap 2 Styles & Layout Reference

This archived reference summarizes the Bootstrap 2 global settings, grid system, layouts and responsive utilities included in the original page content.

Note: The information below describes a legacy Bootstrap 2 implementation, including its original class names and breakpoints.

At a glance

• Global settings
• Fixed and fluid grids
• Fixed and fluid layouts
• Responsive features and utilities

Global settings

HTML5 doctype

Bootstrap uses HTML elements and CSS properties that require an HTML5 doctype at the beginning of a project.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Typography and links

Bootstrap establishes base display, typography and link styles. In the original framework setup, this included:

• Removing the default margin on body
• Setting the body background to white
• Using @baseFontFamily, @baseFontSize and @baseLineHeight as typography defaults
• Setting the global link color through @linkColor, with underlines applied on hover

These styles were located in scaffolding.less.

Normalize-based reset

Bootstrap 2 replaced its earlier reset block with a modified version of Normalize.css. The framework used much of Normalize within reset.less, with some Bootstrap-specific changes.

Grid system

Bootstrap 2 provides fixed and fluid grid options. Both use a 12-column structure, while the fluid grid uses percentages rather than pixel-based column widths.

Fixed grid

The default fixed grid uses 12 columns and a 940px-wide container when responsive features are not enabled. With the responsive stylesheet, the layout adapts at the framework’s defined viewport widths; below 767px, columns become fluid and stack vertically.

For a two-column row, add column spans that total 12.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Offsets and nesting

Use .offset* classes to move a column to the right by a whole number of columns. Nested rows belong inside an existing .span* column, and their child spans should add up to the width of the parent column.

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

Fluid grid

To use percentage-based columns, change .row to .row-fluid. The column classes remain the same.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Fluid offsetting also uses .offset*. For nested fluid rows, each nested set of columns should add up to 12.

Layouts

Fixed layout

A fixed-width layout uses a .container wrapper.

<body>
  <div class="container">
    ...
  </div>
</body>

Fluid layout

A fluid, two-column layout uses .container-fluid, a .row-fluid and column spans for the sidebar and page body.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">Sidebar content</div>
    <div class="span10">Body content</div>
  </div>
</div>

Responsive design

Enable responsive features

The original Bootstrap 2 setup requires a viewport meta tag and the additional responsive stylesheet in the document <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

In the original framework, responsive features were not included by default. Projects compiled through its Customize page only needed the viewport tag.

How responsive behavior works

Bootstrap uses media queries, commonly based on min-width and max-width, to adjust column widths, stack elements where needed and resize headings and text for different devices.

Original supported layout ranges

Layout range	Behavior
Large display: 1200px and up	70px columns with 30px gutters
Default: 980px and up	60px columns with 20px gutters
Portrait tablets: 768px and above	42px columns with 20px gutters
Phones to tablets: 767px and below	Fluid columns without fixed widths
Phones: 480px and below	Fluid columns without fixed widths

Responsive utility classes

Bootstrap 2 includes visibility utilities in responsive.less. Use them sparingly to complement a device’s presentation rather than creating separate versions of the same content.

• .visible-phone, .visible-tablet and .visible-desktop show content at their respective layout ranges.
• .hidden-phone, .hidden-tablet and .hidden-desktop hide content at their respective layout ranges.

These utilities were not supported for use with tables in the original documentation.

Frequently asked questions