Grid

Bootstrap Grid System

The Bootstrap grid layout is repsonsive and is based off of 12 columns.

More about the Bootstrap grid

.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-md-8
.col-md-4

Columns are located inside a row, rows are located inside a contaner, and a container is located inside a section:


<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
content
</div><!--/.col-xs-12-->
</div><!--/.row-->
</div><!--/.container-->
</section>

You can also nest a child grid with a single column.

Column Ordering

Although the Bootstrap grid documentation explains column ordering, our Positioning page has more concrete examples.

Grid Alternative: Flexbox  Code

A benefit to this technique is that rows of content automatically adjust in height to the tallest item. So you do not have to clear column floats to fix improperly floating items.

Columns

Two Columns
line one
line two
line one
line one
line one
line two
line three
Three Columns
line one
line two
line one
line one
line two
line three
line one
line two
line three
line one
line one
line two
Four Columns
line one
line two
line one
line one
line one
line two
line three
line one
line two
line three
line one
line one
line one
line two

Padding Adjustments  Code

Adjust the inner padding within the cells of a flexboc container.

Medium Padding
line one
line two
line one
line one
line one
line two
line three
line one
line two
line three
line one
line one
line one
line two
Small Padding
line one
line two
line one
line one
line one
line two
line three
line one
line two
line three
line one
line one
line one
line two
No Padding
line one
line two
line one
line one
line one
line two
line three
line one
line two
line three
line one
line one
line one
line two

Grid Alternative: CSS Columns  Code

CSS-Based Columns take one group of content and split it into to one or more columns. There are 2-4 columns available. The following examples split a single paragraph into multiple columns, but this can be applied to other elements like lists.

Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis ultrices nisl a hendrerit. Fusce malesuada at tortor in ullamcorper. Phasellus fringilla ligula velit, a faucibus dolor pellentesque ac. Nam ut justo in nulla condimentum blandit efficitur eget nibh. Sed ut orci tristique, facilisis elit ac, venenatis mauris. Nunc condimentum ante eget consequat ultrices. Cras risus lectus, pharetra et vulputate porttitor, lobortis ut mi. Aliquam vitae placerat quam, vel rutrum mi.

Pellentesque gravida sem ac ante bibendum, quis tincidunt nulla porta. Phasellus tempus porta efficitur. Pellentesque aliquet lobortis lacus vitae ultrices. Fusce ac massa sit amet libero efficitur mattis. Integer in porta urna. Pellentesque interdum ligula vitae efficitur vehicula. Sed tincidunt, nulla eu interdum posuere, risus elit laoreet quam, a porttitor lorem dolor quis odio. Aliquam erat volutpat.

Nullam pulvinar laoreet volutpat. Ut sollicitudin ante erat, quis laoreet justo dignissim a. Duis vestibulum maximus congue. Sed at ante a lectus vehicula gravida et nec nulla. Proin vitae facilisis libero. Integer blandit eleifend magna, quis vulputate metus. Sed viverra mollis mauris mollis ullamcorper. Donec sed maximus mi. Curabitur at dolor tristique odio interdum feugiat vel quis eros.

Three Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis ultrices nisl a hendrerit. Fusce malesuada at tortor in ullamcorper. Phasellus fringilla ligula velit, a faucibus dolor pellentesque ac. Nam ut justo in nulla condimentum blandit efficitur eget nibh. Sed ut orci tristique, facilisis elit ac, venenatis mauris. Nunc condimentum ante eget consequat ultrices. Cras risus lectus, pharetra et vulputate porttitor, lobortis ut mi. Aliquam vitae placerat quam, vel rutrum mi.

Pellentesque gravida sem ac ante bibendum, quis tincidunt nulla porta. Phasellus tempus porta efficitur. Pellentesque aliquet lobortis lacus vitae ultrices. Fusce ac massa sit amet libero efficitur mattis. Integer in porta urna. Pellentesque interdum ligula vitae efficitur vehicula. Sed tincidunt, nulla eu interdum posuere, risus elit laoreet quam, a porttitor lorem dolor quis odio. Aliquam erat volutpat.

Nullam pulvinar laoreet volutpat. Ut sollicitudin ante erat, quis laoreet justo dignissim a. Duis vestibulum maximus congue. Sed at ante a lectus vehicula gravida et nec nulla. Proin vitae facilisis libero. Integer blandit eleifend magna, quis vulputate metus. Sed viverra mollis mauris mollis ullamcorper. Donec sed maximus mi. Curabitur at dolor tristique odio interdum feugiat vel quis eros.

Four Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis ultrices nisl a hendrerit. Fusce malesuada at tortor in ullamcorper. Phasellus fringilla ligula velit, a faucibus dolor pellentesque ac. Nam ut justo in nulla condimentum blandit efficitur eget nibh. Sed ut orci tristique, facilisis elit ac, venenatis mauris. Nunc condimentum ante eget consequat ultrices. Cras risus lectus, pharetra et vulputate porttitor, lobortis ut mi. Aliquam vitae placerat quam, vel rutrum mi.

Pellentesque gravida sem ac ante bibendum, quis tincidunt nulla porta. Phasellus tempus porta efficitur. Pellentesque aliquet lobortis lacus vitae ultrices. Fusce ac massa sit amet libero efficitur mattis. Integer in porta urna. Pellentesque interdum ligula vitae efficitur vehicula. Sed tincidunt, nulla eu interdum posuere, risus elit laoreet quam, a porttitor lorem dolor quis odio. Aliquam erat volutpat.

Nullam pulvinar laoreet volutpat. Ut sollicitudin ante erat, quis laoreet justo dignissim a. Duis vestibulum maximus congue. Sed at ante a lectus vehicula gravida et nec nulla. Proin vitae facilisis libero. Integer blandit eleifend magna, quis vulputate metus. Sed viverra mollis mauris mollis ullamcorper. Donec sed maximus mi. Curabitur at dolor tristique odio interdum feugiat vel quis eros.