How To: Bootstrap 3 And Grid Basics

Boostrap 3.x Grid

A Brief Bootstrap 3.x Grid Demo/Tutorial

Basic Grid Rules

• Rows will only hold 12 columns regardless of type (lgmdsmxs)
• Rows should not have more than 12 columns for their initial size (desktop)
• If using sm or xs tags, rows will have more than 12 columns, but this should be anticipated and organized to account for this
• All columns groups must be wrapper in a <div class="row"></div>
• All 'rows' must be wrapped in a <div class="container"></div>
• All container's should be wrapped in a <section></section> tag

Code Example

Column Breakpoints

• lg - Will maintain this # of columns from > 1200px (17in laptops and screens)
• md - Will maintain this # of columns from 1199px to 992px (15.6in Laptops and horizontal tablets)
• sm - Will maintain this # of columns from 991px to 768px (vertical tablets)
• xs - Will maintain this # of columns for anything under 767px (phones and small tablets)
• If you do not specify what to do at each breakpoint...Bootstrap will go to 100% width when it hits the last breakpoint
• So our <div class="col-md-6"></div> will break from 50% to 100% width at 992px, since the md breakpoint is at 992px

Sizes of Column Numbers

What the number means in the col-md-1 classes

• 1: 8.3%
• 2: 16.67%
• 3: 25%
• 4: 33%
• 5: 41.67%
• 6: 50%

• 7: 58.33%
• 8: 66%
• 9: 75%
• 10: 83.33%
• 11: 91.66%
• 12: 100%

Simple Examples

I am 50% at 'md' and 'sm' but 100% at 'xs' I am the same as the column next to me I am 100% all the time since I am md-12 and nothing else! md-3 sm-6 xs-12 md-3 sm-6 xs-12 md-3 sm-6 xs-12 md-3 sm-6 xs-12 md-4 sm-4 xs-4 md-4 sm-4 xs-4 md-4 sm-4 xs-4

Code for the above examples:

Nested Columns

If you want to nest columns inside of columns always wrap the nested columns with a row!!! This is super important, and although Bootstrap will forgive you sometimes, many times your breakpoints will get weird (not in the good way) as they hit sm and xs

Why does this happen?

Columns are inline-block and rows are block. So the row gives you a chance to reset the display. If you simple keep adding columns, they will stack whenever they have room. Since Bootstrap is percentage based, this is bound to happen.

Wrapping your columns in a row will gaurentee their behavior!

Let's look at some example codes!

Basic Nested Examples

There are 4 columns that are each col-md-3 col-sm-3 col-xs-3 nested inside of this col-md-6 col-sm-6 col-xs-12 Hi how are you There are 4 columns that are each col-md-3 col-sm-6 col-xs-12 nested inside of this col-md-6 col-sm-6 col-xs-12 Hi how are you

Code for the above examples:

Nested Insanity

These 2 md-6's (that are inside of an md-6) have different nested columns col-6 #1 6's until xs, then 12 6's until xs, then 12 col-6 #2 6's all the way 6's all the way This is 3 md-4's inside of an md-6 that will behave differently md-4 sm-6 xs-12 md-4 sm-6 xs-12 md-4 sm-12 xs-12

Code for the above examples:

Offsetting Columns

Offestting columns can be handy to make space when you need it (such as when on desktop you want padding, but not on table). The offsets can happen at all the varying breakpoints: lg, md, sm, xs, and just like columns, they will only happen during the specified breakpoint. Note the row is grey This column is actually always 12 columns. It will begin as offset-2, then it will break to offset-1, then not have an offset at all

Code for the above example:

How do these grid work?

Great question. The grids work using media queries to set the width of them to specific percentages when the screen is a specific size. To learn more about media queries, and how to make your own Bootstrap-like grid system, check my Codepen that is here

Other useful links:

Bootstrap Grid Docs Bootstrap Docs