A tutorial on bootstrap and its grid system.

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <style>
    body {
      background: black;
    }
    .col-xs-12 {
      height: 100px;
      background-color: blue;
      color: white;
      text-align: center;
      border: 1px solid black;
    }
    .col-xs-8 {
      height: 100px;
      background-color: red;
      color: white;
      text-align: center;
      border: 1px solid black;
    }
    .col-xs-6 {
      height: 100px;
      background-color: yellow;
      color: black;
      text-align: center;
      border: 1px solid black;
    }
    .col-xs-4 {
      height: 100px;
      background-color: green;
      color: white;
      text-align: center;
      border: 1px solid black;
    }
    .col-xs-2 {
      height: 100px;
      background-color: orange;
      color: black;
      text-align: center;
      border: 1px solid black;
    }
    .footer .col-sm-4 {
      height: 100px;
      background-color: purple;
      color: white;
      text-align: center;
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <!--

  Grid Classes:
    .container: wrapper for all your rows
    .row: contains all your column classes
    .col-##-##: the sizes of the columns in your row (xs, sm, md, lg)

  Ordering Classes (does not work on sm or xs):
    .col-##-push-##: pushes your columns
    .col-##-pull-##: pulls your columns
    
  Offset Classes (does not work on sm or xs):
    .col-##-push-##: moves your columns depending on what the column is offset by
    .col-##-pull-##: pulls your columns
  
  Responsive Utility Classes:
    They hide and show content on your screen depending on which device you style for.
    
    .visible-##: your content will only be visible on that screen size
    .hidden-##: your content will be hidden on that screen size
    
    
-->

  <div class="row">
    <div class="col-xs-12">
      <p>col-xs-12</p>
      <p>This has no container and will always strectch the entire width of the page.</p>
    </div>
  </div>

  <br>

  <div class="container">

    <div class="row">
      <div class="col-xs-12">
        <p>col-xs-12</p>
        <h2 class="visible-xs">extra small screen</h2>
        <h2 class="visible-sm">small screen</h2>
        <h2 class="visible-md">medium screen</h2>
        <h2 class="visible-lg">large screen</h2>
      </div>
    </div>

    <!-- multiple columns, multiple sizes (must always add to 12) -->
    <div class="row">
      <div class="col-xs-6 col-lg-4">
        <span class="hidden-lg">col-xs-6</span>
        <span class="visible-lg">col-lg-4</span>
      </div>
      <div class="col-xs-6 col-lg-8">
        <span class="hidden-lg">col-xs-6</span>
        <span class="visible-lg">col-lg-8</span>
      </div>
    </div>

    <!-- nested and stacked -->
    <div class="row">

      <div class="col-sm-6">
        <div class="row">
          <div class="col-xs-4">col-xs-4</div>
          <div class="col-xs-8">col-xs-8</div>
        </div>
      </div>

      <!-- pushed and pulled -->
      <div class="col-sm-6">
        <div class="row">
          <div class="col-xs-4 col-md-push-8">col-xs-4</div>
          <div class="col-xs-8 col-md-pull-4">col-xs-8</div>
        </div>
      </div>

    </div>

    <!-- stacked on xs -->
    <div class="row footer">
      <div class="col-sm-4">col-sm-4</div>
      <div class="col-sm-4">col-sm-4</div>
      <div class="col-sm-4">col-sm-4</div>
    </div>

    <!-- hidden over xs -->
    <div class="row hidden-xs">
      <div class="col-xs-2">col-xs-2</div>
      <div class="col-xs-2">col-xs-2</div>
      <div class="col-xs-2">col-xs-2</div>
      <div class="col-xs-2">col-xs-2</div>
      <div class="col-xs-2">col-xs-2</div>
      <div class="col-xs-2">col-xs-2</div>
    </div>

    <!-- offsets -->
    <div class="row">
      <div class="col-md-4 col-md-offset-8 panel">
        Find easydevtuts on social media
      </div>
    </div>

  </div>

</body>

</html>

# Bootstrap 3.0 Tutorial - Grid System

This is based on a tutorial that I followed on YouTube for Bootstrap 3.0. Here's the link to the first of five in a series:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=g3j7eRunzv4
" target="_blank"><img src="http://img.youtube.com/vi/g3j7eRunzv4/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

## Grid Classes
* `.container` is a wrapper for all your rows
* `.row` contains all your column classes
* `.col-##-##` are the sizes of the columns in your row (xs, sm, md, lg)

## Ordering Classes (does not work on sm or xs):
* `.col-##-push-##` pushes your columns
* `.col-##-pull-##` pulls your columns
  
## Offset Classes (does not work on sm or xs):
* `.col-##-push-##` moves your columns depending on what the column is offset by
* `.col-##-pull-##` pulls your columns

## Responsive Utility Classes
They hide and show content on your screen depending on which device you style for.

* `.visible-##` your content will only be visible on that screen size
* `.hidden-##` your content will be hidden on that screen size