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).
<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