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

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.