GOV
Grid System
How our rows and columns work
The City of St. Louis uses a 12 column grid system based on the Bootstrap 3 grid and breakpoints. This consists of a row div with one or more column divs inside with various widths and breakpoints.
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
- 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<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>
More Layout
Page Sections
The sections that make up a page on stlouis-mo.gov
Website Layout
Containers, grid system, basic page elements
