Bootstrap: A Crash Course

Bootstrap: A Crash Course Part 2

April 1, 2015

Understanding How Bootstrap Works

This post will help you to understand how Bootstrap classes work together to make your website responsive.

When creating your website with Bootstrap, you will designate a certain class name to an HTML or HTML 5 container element. Examples: header, footer, section, article, aside, div. The three class names that you need to know are: .container .row and .col .

Basic Analogy: Think of the .container class as an outline of a rectangular wall. Since most walls are made of brick, you have to put these bricks in rows, and eventually the rows will stack on top of each other to fill in the outline of the wall. Each row in the wall is your .row class. To make your row, you can choose different brick widths as long as they conform to the set size of the row. These varying sized bricks are your .col class.

Bootstrap Brick Analogy

NOTE: These classes have a hierarchy, or order in which they must be used.

  1. The top of the hierarchy is the .container class: The .container class is what will hold the content of your website. According to your preference, the .container can hold all of the contents in the header, the body, and footer in one unit, or if the need arises, you can use multiple .container(s). Regardless of your choice, it is mandatory that you have a .container class in place for you to take advantage of using the other two classes .row and .col.
  2. The next tier down on the hierarchy is the .row class. This class will hold different main sections of your site, for example with this site, one of the rows holds the article you are reading and also the sidebar. Another row could hold an entire header section.
  3. Within each .row section there can be one or many .col class sections. This is the last tier in the hierarchy, and the one to pay most attention to. These individually hold a piece of your site. One may hold this article, and another the sidebar.

The two things you need to know about the .col class: the magic number and size.

The magic number that you have to know is the number 12. Twelve represents the entire width of the browser window, and the sum of all the .col sections must equal it. If you want two sections within the same row to have the same width on-screen, then you would use col-6 for both of them. If you want one section to take up the majority of the screen, then you would assign that section col-8 and the other col-4.  As long as the numbers add up to 12 you are free to do whatever variation you can come up with.

While it may be nice to have two col. sections next to each other while reading on a desktop, it can become a pain to view if they are still next to each other while being viewed on a smartphone. This is where .col size comes in to play. Based on the sizes you have set for a .col, you can designate how many .col sections sit next to each other according to the device the sections are being viewed on.

There are four sizes to know: xs, sm, md, and lg. Although you can probably guess, lg is for larger desktops, md is for desktops, sm is for tablets, and xs is for smart phones. You can set more than one size at a time when assigning a class to an HTML or HTML 5 element.

An example for a .row that contains two .col sections :

<div id=”section1″ class=”col-lg-8 col-xs-6″></div>

<div id=”section2″ class=”col-lg-4 col-xs-6″></div>

On a desktop it would look like this:

desktop col size

On a smart phone is would look like this:

Bootstrap Small col

Now that you have an understanding of how Bootstrap makes your site responsive, we will take a look at the code for a basic Bootstrap site to help solidify the concepts you learned today on the next post, Bootstrap: A Crash Course Part 3.