Website Layout

Containers, grid system, basic page elements

Overview

Our content is surrounded by two container divs, a <div class="full-row full-row-white"> and a <div class="container">.

The .full-row class allows you to specify background colors for the container that extend the full width of the page. Color options include .full-width-white, .full-width-light, .full-width-medium, and .full-width-dark. Usually we use a down arrow to transition between two .full-width-row divs with different colors, like <div class="full-row-arrow full-row-arrow-white"></div> at the top of the following .full-width-row.

The .container class sets a maximum width for the content area and centers it on the page. There is also the .container-fluid option, which lets the content span the full screen width. Currently this is only used for some dashboards (see COVID-19 dashboard as an example).

Containers
<div class="full-row full-row-white">
    <div class="container">
        <h1>Hello World</h1>
    </div>
</div>
<div class="full-row full-row-dark">
    <div class="full-row-arrow full-row-arrow-white"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2>Section 1</h2>
            </div>
            <div class="col-md-6">
                <h2>Section 2</h2>
            </div>
        </div>
    </div>
</div>

More Layout

Grid System
How our rows and columns work

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

Help Us Improve This Page

Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.

Was this page helpful?



Comments are helpful!
500 character limit

Feedback is anonymous.