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, but so far this is not in use on stlouis-mo.gov.

Containers (19 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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.