The Basic .col-xx-xx Classes

Bootstraps column classes are what makes up the individual columns of the grid. It’s main purpose is to align your components into – you guessed it, columns. They’re designed to have 3 sections:

The prefix part “col” – just organizes all the col classes together, sort of like a namespace. And if you’ve worked with other frameworks in the past, the 3rd section “12” just tells us to occupy 12 columns out of the maximum 12. Pretty basic right?
But what about the 2nd part? In our example, it’s the “lg”. This tells the browser to primarily use this for large screens only (default is 1170 pixels and above). Meaning, since we can use multiple classes on any element, we can now design for multiple sizes of the screen. Pretty powerful eh?
So how does it do that?
So if you investigate the css, and look for that particular class (.col-lg-12), you will see that it’s enclosed in a media query:

@media (min-width: 1200px) {
.col-lg-12 {
    width: 100%;
  }
}

As a matter of fact, ALL of the “lg” classes are inside this media query. So the rule only applies to a specific screen resolution. The rest of the sizes (md for 970px, sm for 768px and xs for less than 768px) contains the rules for its respective classes. Pretty forward thinking right?
Show me an example of its usefulness:
A common scenario is a two-column layout, with content on the left and sidebar on the right. With just a single class applied to both areas: red div has a class of col-lg-9 and green div has col-lg-3.
But most of the time – your sidebar’s content is not ready for a full page width in medium and small view ports. So you wish the sidebar doesn’t snap to the bottom right away right?

The solution: apply multiple .col classes into the same divs (one for each of the view port sizes). Take a look at the next example – where we apply a different column number ONLY on the extra small (.col-xs-12).

You see how the divs retained their 2 column layout all the way until the extra small view port is reached. Only then, did our sidebar snap to the bottom at full width. So you see how useful this is yet?

Classes “row” and “container”

Let’s jump out of the columns and look at the classes that wrap them. We have two important classes that do just that.
.row
Just as the word describes – a row is something that is on one horizontal layer. Similar to a “record” in a database, or a “row” in a table. In Bootstrap, if you want elements to be in one horizontal layer – use a class .row.

The dark grey divs both have a class “.row”. A row basically acts as a traditional div tag, but instead can be applied as a class. I’ve used class .row on a header or footer tag – and it works really well.
.container
Ideally, you add your HTML elements that need to be grouped together inside a class .container. The “max-width” properties for each break point (the media queries) are defined in this class. It is a very important class. One that is required to make things work the way they do.
According to Bootstrap’s docs, containers are:

Easily center a page’s contents by wrapping its contents in a .container. Containers set max-width at various media query breakpoints to match our grid system.

Containers also follow the default padding rule of 15 pixels on each side. So the contents are automatically flushed together with just the right amount of gutter space all the time.

How does Nesting work?

Nesting means adding more .col classes inside of existing .col classes. Most of the time, you would need to add a .row class first – before nesting your .col divs inside in order to see desired results.
So when do you need to nest?
All the time! If you inspect most HTML documents – it’s already a series of nested DOM elements so nesting your .col classes is already expected behavior. Although in Bootstrap, nesting will save you a lot of work calculating and deciding how wide a column has to be.

See both green divs have that have .col-lg-6 classes? These are nested inside the red div (the parent div). Also, notice that a nested .col-lg-6 class takes up 50% of the parent div’s width. In other words, all you really need to remember is the 12 grid rule – no matter how deep the nesting goes.
Note that I also applied the multiple classes technique (discussed above) to the child classes shown in the screenshot above. This is so that when resized, both div’s retain it’s 6 column width – until the last view port kicks in.

Pushing, Pulling and Offsetting

For even deeper customization of the grid elements, Bootstrap allows you to shift the columns around. Push and pull classes allow you to move the column # times to the left (also know as pull), or # times to the right (push).

So consider the markup below. Even though the green div is written right above the red div, the push and pull classes allows us to order them as if they were otherwise.

green pushed 4
red pulled 4

The code above makes it so the divs appear in the browser in a different order.

What makes it work?
If you inspect the push and pull classes, it utilizes the right and left property respectively – in percents. Since everything in Bootstrap is positioned relatively, using left and right will automatically just work.

@media (min-width: 992px)
   .col-md-pull-4 {
      right: 33.33333333333333%;
   }
   .col-md-push-4 {
      left: 33.33333333333333%;
   }
}

Offsets
Offsetting classes is similar to push and pull classes – except for the “offset” keyword in the class name. Also similar to push and pull, the number in the class tells the browser how many columns to offset the element.

The difference with offsetting is that it uses the margin left property. So if your element is right next to another element – it will simply push itself against it by the designated percentage. See the code below for a .col-md-offset-4 class:

@media (min-width: 992px)
 .col-md-offset-4 {
    margin-left: 33.33333333333333%;
 }

You see how this can be useful? You can simply apply this class to whichever you want to offset and still retain the responsive margins effectively. Pretty good right?

Visibility Classes

Although this has nothing to do with the grid, I thought it is worth a mention. We’ve all worked with a system that has a default class for a “display:none”. Well not only does Bootstrap have this (it’s called .hidden), but they’ve taken it an extra step. I like to call them the “visibility” classes.
These classes do just that – controls the visibility of elements – across multiple views. Now, when designing your web site, you just now have to pick which elements to show, hide in large, medium and small views – then simply apply the visibility classes. The table below (taken from Bootstrap’s website) explains what the classes do in specific view ports.

Conclusion

I believe we’ve looked at the core classes that will get you up and running with Bootstrap’s grid system. This alone, if used properly – will save you countless hours of development time. Don’t forget to read up on the rest of Bootstrap’s many features such as the built-in components, Javascript plugins and of course, the rest of the styles. Good luck and have fun coding!
Last of all, I would like to keep this an open discussion. If there’s anything that you would like to add, please leave a comment. I will be more than happy to answer questions or append to the article.

The post Exploring the Bootstrap 3.0 Grid System appeared first on Michael Soriano.