Grid System

How our rows and columns work

Overview

The City of St. Louis uses a 12 column grid system based on the Bootstrap 3 grid and breakpoints. Each row is a div with one or more column divs inside with various widths and breakpoints. 

Rows and Columns

A column like this one <div class="col-md-6"> means that for screen sizes at the medium breakpoint or higher this column will span 6 of 12 available columns (50%). Below the medium break point, it will automatically switch to take up the full 12, making this column take up the full row.

You can target as many breakpoints as you want, keeping in mind that for breakpoints smaller than the smallest one you specify it will always go to 12, and it will maintain the largest breakpoint you specify as the screen gets larger. This column has several layouts for different breakpoints: <div class="col-sm-7 col-md-6 col-lg-4">.

Breakpoints

The columns have the following breakpoints that can be targeted: 

  • xs: 480px
  • sm: 768px
  • md: 992px
  • lg: 1200px

Examples

.col-xs-12
.col-sm-6
.col-sm-6
.col-sm-8
.col-sm-4
.col-sm-4
.col-sm-8
.col-sm-4
.col-sm-4
.col-sm-4
A few rows with different column combinations
<div class="row">
    <div class="col-xs-12">
        .col-xs-12
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        .col-sm-6
    </div>
    <div class="col-sm-6">
        .col-sm-6
    </div>
</div>
<div class="row">
    <div class="col-sm-8">
        .col-sm-8
    </div>
    <div class="col-sm-4">
        .col-sm-4
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        .col-sm-4
    </div>
    <div class="col-sm-8">
        .col-sm-8
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        .col-sm-4
    </div>
    <div class="col-sm-4">
        .col-sm-4
    </div>
    <div class="col-sm-4">
        .col-sm-4
    </div>
</div>

Column Order

Sometimes the order of columns that we want to display on larger screens is different from the best order on mobile or for a screen reader.

For example, we might want page-level navigation on a long page to get out of the way on desktop and display to the right of the content, since it's not the main focus and people can visually see both at the top of the page. 

However, if we were to actually put that navigation in a column that follows the rest of the page's content, people on mobile or screen readers would not see it as an option until they got through all of the content, which defeats the purpose. 

We can make columns show up in a different order visually with "pull" and "push". Using col-lg-push-4 would "push" the current column over 4 units to the right. And col-lg-pull-8 would "pull" the current column over 8 units to the left.

Example

Here are two rows with the same column sizes and orders in the DOM, but visually the second one has flipped the order on large screens. Note that it is possible to overlap columns if you don't get the numbers quite right (or maybe you want to, I don't know!). 

First Column.

.col-sm-4

Second Column.

.col-sm-8

First Column.

.col-sm-4 .col-lg-push-8

Second Column.

.col-sm-8 .col-lg-pull-4
Changing column order visually
<div class="row text-center">
    <div class="col-sm-4">
        <div class="content-block">
            <p>First Column.</p>
            <code class="">.col-sm-4</code>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="content-block">
            <p>Second Column.</p>
            <code>.col-sm-8</code>
        </div>
    </div>
</div>
<div class="row text-center">
    <div class="col-sm-4 col-lg-push-8">
        <div class="content-block">
            <p>First Column.</p>
            <code>.col-sm-4 .col-lg-push-8</code>
        </div>
    </div>
    <div class="col-sm-8 col-lg-pull-4">
        <div class="content-block">
            <p class="">Second Column.</p>
            <code>.col-sm-8 .col-lg-pull-4</code>
        </div>
    </div>
</div>

More Layout

Page Sections
The sections that make up a page on stlouis-mo.gov

Website Layout
Containers, grid system, basic page elements

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.