Why Use The Bootstrap Grid?

Executive Developer Summary

The Bootstrap grid system makes page layout fast and easy.

If you just want to play with layouts using the Bootstrap grid system, try my Bootstrap layout sample. The sample will let you dynamically add and remove the Bootstrap style sheet and the Bootstrap responsive style sheet. The initial load will not have Bootstrap in place, so all the grid columns pile on top of each other.

Using the sample you can see how the Bootstrap grid and fluid grid behave inside and outside of the Bootstrap container. Try resizing the browser window or visit the page with a small device to see how the different layouts react with and without the responsive design style sheet. Fork the project and try your own HTML. 

Intro

The term “page layout” makes me think about arranging content on a web page, but page layout has been around since humans started writing on papyrus, so “page layout” predates the web by several centuries. One popular approach to page layout in both print and the web has been the grid based layout.

Grids are popular for several reasons, but primarily grids are about providing structure. For web designers a grid defines the horizontal and vertical guidelines for arranging content and enforcing margins. Grids also provide an intuitive structure for viewers, because it is easy to follow a left to right (or a right to left) flow of content moving down a page. The grid itself is not a visible component, but only exists to provide order, alignment, and consistency. Usability thrives on consistency, which makes consistency a high priority, despite what Ralph Waldo says.

Web browsers and grids work together well. Every HTML element is a rectangle, and a grid can easily constrain and arrange rectangles. As the browser changes size, the  grid can expand or contract, and also match the various display sizes of today’s devices.

Grids on the Web

In the late 1990s I (unknowingly) built pages with a grid based layout using <table> elements and arranging content into table cells. As CSS became more mature the web world started to avoid tables for layout, and eventually a number of CSS frameworks for grid based layout started to appear. These included Blueprint, 960.gs,  YUI grids, and others. Bootstrap is one of the more recent CSS frameworks to include a grid system amongst its features.

By default, the Bootstrap grid consists of 12 columns and is 940 pixels wide. Create a row in the grid using the "row" class, and create columns inside using span1 through span12 classes. span1 is 1 unit wide, and span7 is 7 units wide. The goal is use a total of 12 units per "row" container.

For a visual example, consider the following HTML:

<div class="container">               
    <div class="row">
        <div class="span3">3</div>
        <div class="span4">4</div>
        <div class="span5">5</div>
    </div>
    <div class="row">
        <div class="span5">5</div>
        <div class="span7">7</div>
    </div>
    <div class="row">
        <div class="span3">3</div>
        <div class="span7 offset2">7 offset 2</div>
    </div>
    <div class="row">
        <div class="span12">12</div>
    </div>
</div>

The HTML will give us the following layout (text-centering added by me):

As you can see, span12 will give you a single column layout, and using different combinations of spans and offsets can give you 2 column layouts, 3 column layouts, and layouts with offsets and white space.

With no other settings in place, the fixed grid in a container will always use 940 pixels of horizontal space. In a small browser window you'll see horizontal scroll bars. In a large browser window you'll see the container centered and white space on the left and right. If you don't like the content to appear inside a fixed 940 pixels you can go fluid, or go responsive (or both).

Fluid Rows

A fluid row (using class "row-fluid") will horizontally size a column using a percentage instead of a fixed pixel value. Using a percentage means a fluid row can expand to fill all available horizontal space when it is in a large container, and shrink columns to keep them from vertically stacking as the container shrinks. You can see the difference below in a zoomed out screen shot of a 1400 pixel wide browser window (fixed grid on top, fluid grid on bottom), or watch the results in the sample page for yourself.

Note that for the fluid row to work properly and be stretchy, you can't put it inside an element with the "container" style as in the previous sample. The container style will enforce the 940 pixel width. You can use fluid rows outside of container elements, or inside of elements with container-fluid, which doesn't constrain the width.

Making It Responsive

Adding in the Bootstrap responsive design style sheet will allow the grid to change appearance to match the screen size of a device. For phones, and devices with a horizontal resolution <= 767px, columns switch to being fluid and stack on top of each other vertically. This avoids horizontal scroll bars on small devices where it is easier to scroll vertically. As the resolution increases from 768 to 980, and from 980 to 1200, the Bootstrap styles will grant a greater column width and allow columns to float up beside each other. Fluid rows continue to match the size of a window by filling all available space, but responsive design steps in to stack the columns vertically on small devices. The easiest way to see the difference is to try the sample. 

Parting Words

If you haven't used a CSS framework for a grid layout, you might want to try one and see how much time it saves in development. Keep in mind that grids aren’t the only approach to layout. Unique designs will turn to circular layouts, tilted grids, and nonconforming arrangements that have a touch of chaos. The best layout depends on the type of site you are trying to build, and the audience. Don’t forget the audience.