April 1, 2015
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.
NOTE: These classes have a hierarchy, or order in which they must be used.
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:
On a smart phone is would look like this:
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.