Search Colorado.edu

Grid

You can also add an 12 column grid to create a site or page layout.

This grid is based on the Bootstrap grid system, so if you are already familiar with the Bootstrap grid classes (col-lg-6 col-md-4 col-sm-12) this should be simple to use.

In order to use this grid you must also include the grid CSS stylesheet.

1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/6
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12
1/2 1/3 1/6 1/12

Examples

Two-thirds
One-third
<div class="row equal-height text-minify margin-bottom"> <div class="col-xs-8"> <div class="padding background-gray-light text-minify text-align-center margin-bottom-large">Two-thirds</div> </div> <div class="col-xs-4"> <div class="padding background-gray-light text-minify text-align-center margin-bottom-large">One-third</div> </div> </div>
One-half
One-quarter
One-quarter
<div class="row equal-height text-minify"> <div class="col-xs-6"> <div class="padding background-gray-light text-minify text-align-center margin-bottom-large">One-half</div> </div> <div class="col-xs-3"> <div class="padding background-gray-light text-minify text-align-center margin-bottom-large">One-quarter</div> </div> <div class="col-xs-3"> <div class="padding background-gray-light text-minify text-align-center margin-bottom-large">One-quarter</div> </div> </div>
One-quarter
Three Quarters
<div class="row equal-height text-minify"> <div class="col-xs-3"> <div class="padding background-gray-light text-minify text-align-center margin-bottom-large">One-quarter</div> </div> <div class="col-xs-9"> <div class="padding background-gray-light text-minify text-align-center margin-bottom-large">Three Quarters</div> </div> </div>

Grid with Vertically Centered Contents

Add the .center-vertical class to the .row element to have the contents centered vertically. (This example is for desktop view only - content will stack on mobile devices)

placeholder image

Diam consequat condimentum

Mus ultrices primis dapibus erat natoque integer facilisis tellus feugiat netus varius praesent egestas nostra varius.

placeholder image

Placerat vel varius consectetuer venenatis

Facilisi a posuere Posuere, neque non orci cursus. Molestie convallis porta eget torquent venenatis porttitor sagittis.

<div class="row gutters-none center-vertical margin-xs-bottom margin-md-bottom-none"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="https://via.placeholder.com/1600x900" alt="placeholder image"> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="content padding"> <h4>Diam consequat condimentum</h4> <p>Mus ultrices primis dapibus erat natoque integer facilisis tellus feugiat netus varius praesent egestas nostra varius.</p> </div> </div> </div> <div class="row gutters-none center-vertical direction-lg-row-reverse direction-md-row-reverse margin-xs-bottom margin-md-bottom-none"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="https://via.placeholder.com/1600x900" alt="placeholder image"> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="content padding"> <h4>Placerat vel varius consectetuer venenatis </h4> <p>Facilisi a posuere Posuere, neque non orci cursus. Molestie convallis porta eget torquent venenatis porttitor sagittis.</p> </div> </div> </div>

Grid with Background Colors

Adding the .equal-height class to the .row element will make all of the child elements of each row the same height

Adipiscing nascetur feugiat platea est aenean enim pellentesque Placerat vel varius consectetuer venenatis tempus pretium. Ut tempor feugiat, iaculis ultricies urna. Venenatis viverra vulputate lobortis tristique primis. Faucibus. Vulputate est.

Mus ultrices primis dapibus erat natoque integer facilisis tellus feugiat netus varius praesent egestas nostra varius. Ut cubilia pharetra porta rutrum leo maecenas ullamcorper. Convallis litora, justo mattis. Diam consequat condimentum ipsum nullam elementum suscipit vel lectus tincidunt erat felis. Lacus euismod. Urna, sapien accumsan faucibus facilisi fames, viverra eu.

Facilisi a posuere Posuere, neque non orci cursus. Molestie convallis porta eget torquent venenatis porttitor sagittis, elit semper nullam consectetuer turpis porta ad lorem in tristique aenean quis. Adipiscing auctor.

<div class="row equal-height text-minify"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="padding background-blue-light text-minify margin-bottom-large"> <p>Adipiscing nascetur feugiat platea est aenean enim pellentesque Placerat vel varius consectetuer venenatis tempus pretium. Ut tempor feugiat, iaculis ultricies urna. Venenatis viverra vulputate lobortis tristique primis. Faucibus. Vulputate est.</p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="padding background-green-light text-minify margin-bottom-large"> <p>Mus ultrices primis dapibus erat natoque integer facilisis tellus feugiat netus varius praesent egestas nostra varius. Ut cubilia pharetra porta rutrum leo maecenas ullamcorper. Convallis litora, justo mattis. Diam consequat condimentum ipsum nullam elementum suscipit vel lectus tincidunt erat felis. Lacus euismod. Urna, sapien accumsan faucibus facilisi fames, viverra eu.</p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="padding background-gold-light text-minify margin-bottom-large"> <p>Facilisi a posuere Posuere, neque non orci cursus. Molestie convallis porta eget torquent venenatis porttitor sagittis, elit semper nullam consectetuer turpis porta ad lorem in tristique aenean quis. Adipiscing auctor.</p> </div> </div> </div>