Skip to main content
King County Logo
Oct
10

Grid System

  1. Home
  2. Working with Design & Civic Engagement
  3. Sitecore
  4. Basic elements
  5. Grid System

Grid System

King County utilizes the Bootstrap responsive, mobile first fluid grid system. The grid scales up to 12 columns as the device or viewport size increases. We’ve included a handy example below illustrating how to use Bootstrap classes to create a grid. For more information on Bootstrap CSS please visit http://getbootstrap.com/css


<!-- The example code below will create a two column grid with a medium breakpoint -->
<div class="container">
    <div class="row">
        <div class="col-md-6">
            ...
        </div>
        <div class="col-md-6">
            ...
        </div>
    </div>
</div>

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-3

.col-md-3

.col-md-3

.col-md-3

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1

Using Bootstrap's visibility classes, I've created a few sample grids below for you to examine in your browser. This first grid is using all 4 grid sizes combined in a single row.

lg indicates that the large grid displaying. The grid stacks horizontally < 1200px.

md indicates that the medium grid displaying. The grid stacks horizontally < 992px.

sm indicates that the small grid displaying. The grid stacks horizontally < 768px.

xs indicates that the extra small grid displaying. This grid is always horizontal.

.col-lg-4.col-md-1.col-sm-5.col-xs-5
.col-lg-4.col-md-5.col-sm-1.col-xs-6
.col-lg-4.col-md-6.col-sm-6.col-xs-1

xs Grid Alone

.col-xs-5

.col-xs-6

.col-xs-1

sm Grid Alone

.col-sm-5

.col-sm-1

.col-sm-6

md Grid Alone

.col-md-1

.col-md-5

.col-md-6

lg Grid Alone

.col-lg-4

.col-lg-4

.col-lg-4

expand_less