Bootstrap can either be a huge time saver or a blood pressure raiser, depending on how you approach it. The key to ensuring that your experience is the former is to take the time to understand how the grid system is put together and to stop fighting the framework.

In this lesson, you'll start by diving into the Bootstrap documentation. It's some of the best on the web, so consider this a soft introduction to the art of reading "docs" (which will come up frequently as we go along in the course).

We'll then highlight some of the key things you should understand and some tips for not driving yourself crazy when working with Bootstrap. Our goal for this lesson is that you come away with a good conceptual understanding of how Bootstrap works and some excitement to apply it to the upcoming project.

The Bootstrap Documentation

The folks at Twitter have compiled an extensive set of documentation. It's very much learn-by-example -- they show you a widget and then the markup which produced it. When you first start out, you'll find yourself doing a lot of copy-pasting from these examples before you really get a handle on what's going on.

You'll also find a starter template and a number of example pages designed to show off some of Bootstrap's features. Simply visit the pages and View Source (or use your developer tools) to see how they apply the Bootstrap styles. You can then copy them to your heart's content.

Note: All the extra comments in the template above are to activate some additional fallbacks when using older browsers with poor support for new features.

Your Assignment

The best way to start thinking about Bootstrap is to browse through its documentation. You probably won't find better documentation for any project on the web, so have at it!

1. Start by Viewing the examples and playing around with resizing the browser to see how they react to different widths. This should give you a good idea of what you can do with Bootstrap.
2. Briefly browse through the CSS page of the docs to familiarize yourself with what's available to you.
3. Briefly browse through the Components page of the docs to see the widgets that Bootstrap gives you access to. Caution: You may drool a little.
4. Check out a Bootstrap 3 Introduction from Erik Flowers for a plain-English introduction to the grid. Stop when you get to the "Mixin" section since that goes deeper than you need.
5. Also, read Erik's Subtle Magic Behind the Bootstrap 3 Grid System for a visual look at what's going on behind the scenes (if you're the "I need to know what's under the hood" type).
6. Finally, start at the top and Carefully re-read the CSS page through the Grid System section (minus the Less Mix-ins). You should understand the basic template layout and the grid system that drives it because that will be core to every Bootstrap project you do.
   
7. (optional) Keep reading and try to understand how you can implement each of the CSS styles and components. The best way to learn this is to actually use it, though, so don't feel like you need to memorize everything the first time around. Knowing where to find it in the docs is just as good.

The Key Concepts

If you learned nothing else from the documentation above, you should at least have a good handle on how the grid system works and how it changes on different screen sizes. The rest will come.

The Grid Arrangement

The most important part of this is understanding that your bootstrap pages will always have the following pattern:

1. A <div class="container"> to wrap everything
2. A <div class="row"> to start a new row
3. A <div class="col-md-8 col-offset-2"> or some other arrangement of columns within the row.

This is important because, if you skip the container or row, your margins will get messed up. Bootstrap uses both positive and negative margins to achieve the nice neat rows you see in the final result. See the diagram below for a look at how that is put together:

As you can see, the container pushes its contents in by a 15px padding. This is good because you always want a bit of buffer between the edge of your screen and the beginning of your content. The container class also dictates the CSS of the row and col-* classes inside of it, so your page won't look right if you omit it.

Then each row actually uses a negative margin of 15px to set everything back to even. This may seem odd but a row will never be used on its own. That's just setting up the columns to do their magic.

Each col-* then adds back a 15px padding so we're back to the original 15px indent. This is important because you can have multiple columns side-by-side, which creates the desired 30px "gutters" between them. We only want a 15px gutter on each side of the screen, which is why the row pulled it back for us.

You can, of course, nest multiple row/col groupings within other columns. Don't be afraid of your HTML markup looking like a giant nested Christmas tree for now! Just remember that a col-* should always be directly inside of a row and you'll be just fine.

If you're still having trouble with this, read The Subtle Magic Behind Bootstrap 3's Grid

Screen Sizes and Columns

What's the difference between a col-md-8 and a col-xs-8? The sizing system determines which screen width will trigger the specified column arrangement. If you've used col-md-8, the column will only show up on screens equal to or larger than the "medium" width.

The different sizings are as follows:

// Extra small devices (phones, less than 768px)
// No media query since this is the default in Bootstrap
<div class="col-xs-10">

// Small devices (tablets, 768px and up)
<div class="col-sm-10">

// Medium devices (desktops, 992px and up)
<div class="col-md-10">

// Large devices (large desktops, 1200px and up)
<div class="col-lg-10">

This actually matters a lot when you're trying to make a site look decent across a variety of different widths. You'll often find yourself building a Bootstrap site on the desktop and then, upon resizing the screen smaller to simulate a mobile device, realize that your text squeezes into really strange places.

There's an easy rule of thumb here:

When in doubt, use Small (sm)

There's no real science to this rule, but it means that your page will look as intended on all devices > 768px wide and then your columns will become full-width on anything smaller. Usually that's a reasonable place to start. You can always modify the sizing (e.g. to col-md-8) or add additional classes (e.g. col-sm-10 col-offset-1 col-md-8 col-offset-2) as necessary.

Tips for Working With Bootstrap

Here are a few things to understand about working with Bootstrap before you start using it in the projects. It may seem a bit abstract now, but you'll see...

Do Not Fight Bootstrap!

If you go with the flow and embrace Bootstrap, your productivity will skyrocket. If you try to fight it, you will be crushed mercilessly. Do not fight Bootstrap!!! We mean it -- surrender completely. You need to fully understand the beast before you can fight it...

What this means from a practical standpoint is that you should try to build your pages at first using 100% Bootstrap classes before even thinking about adding any additional CSS of your own. Accepting this will take you far.

Once you've done as much as you can with the standard Bootstrap classes, then you can work around it. This is important because Bootstrap styles are highly specific (in CSS terms). That means you need to be very targeted with your selectors in order to override them, which becomes a recipe for messy code.

Overriding Bootstrap Styles (if you must...)

The easiest way to "override" bootstrap styles is not to do so. What we mean is that, instead of trying to fight the margin of a col-md-4, you should just enclose that <div> in another <div> with a class of your own. Then add CSS styles to that. For instance, in the example below you could use the info-panel class to push around the two columns within it:

...
<div class="row">
  <div class="info-panel">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
  </div>
  <div class="col-sm-4">
    ...
  </div>
</div>
...

If you must actively override certain Bootstrap styles (like the stylings of their buttons), you'll need to make sure that your new styles are specific enough to override Bootstrap's. You can tell this by checking in your developer tools and seeing which styles are actually being applied.

The best way to get specific enough to have a parent element somewhere in your markup which uses an ID (since Bootstrap is all classes and IDs are more specific) and then benchmarking off there, for instance:

<div id="side-panel" class="container">
  <div class="row">
    <div class="col-md-12">
      <button class="btn btn-primary my-button">
      </button>
      ...
    </div>
  </div>
</div>

Then you can override it more easily using CSS (here we uses SASS nesting for convenience):

/* Nice and specific with an ID! */
#side-panel{
  .my-button{
    // override styles here
  }
}

Advanced Study

If you're already familiar with Bootstrap or have a solid handle on it, browse through the Resources tab to see how it can be combined with the HTML5 semantic tags we covered previously.

Code Review

The important bits of code from this lesson

# Standard markup hierarchy
<div class="container">
  <div class="row">
    <div class="col-sm-8 col-offset-2">
      ...
    </div>
  </div>
</div>

# Div that gets narrower as the screen gets wider
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">...</div>

Wrapping Up

Now that you've seen what Bootstrap can do by viewing their examples and how Bootstrap does it by reading their documentation, you're on the right track. You certainly haven't memorized any of the widgets but you should have a good handle on how the grid system works and some best practices for working with it.

Now, the only thing left to do is build! Luckily, the next assignment will have you do exactly that.

• Bootstrap and HTML5 Semantic Tags from Stack Overflow
• How to Combine Twitter Bootstrap 3 and HTML5 Semantic Elements from Stack Overflow
• Bootstrap and HTML5 -- Section or Div? from Stack Overflow
• Visually design and test Bootstrap forms with Bootply
• Replacing your JavaScript Alertbox with a better one
• Proper Bootstrap Grid

Sorry, comments aren't active just yet!