How to: Bootstrap 3 and Grid Basics

Basic Grid Rules

Rows will only hold 12 columns regardless of type (
```
lg
```
```
md
```
```
sm
```
```
xs
```
)
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-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

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

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

col-6 #2

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-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

Boostrap 3.x Grid

A Brief Bootstrap 3.x Grid Demo/Tutorial

Basic Grid Rules

Code Example

Column Breakpoints

Sizes of Column Numbers

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

Simple Examples

Code for the above examples:

Nested Columns

Why does this happen?

Wrapping your columns in a row will gaurentee their behavior!

Let's look at some example codes!

Basic Nested Examples

Code for the above examples:

Nested Insanity

Code for the above examples:

Offsetting Columns

Code for the above example:

How do these grid work?

Other useful links: