The final thing that I would like to cover regarding Bootstrap's grid is probably the most important one of all. What makes the grid responsive? That is to say, how does the grid adapt to different viewport sizes? The answer to this is two-fold. Firstly, most HTML layouts (even vanilla layouts that were not at all designed to be responsive) have some built-in leeway on how they react when viewed on screens of varying sizes. However, while the layout of a standard web page may still be acceptable in the way a browser renders it on a tablet versus a regular 19-inch monitor, things tend to break down and not work at all for a website that looks decent on a tablet, but is currently being viewed on a standard mobile phone, such as the iPhone 7, or a similarly sized Android device. This is where we need some design intervention, and what leads to the second way in which a Bootstrap grid adapts to the device's viewport size—namely, special tweaks to the classes, and class names for the column.

You'll remember that the class name we've been using for the column element has the following general form:

<div class="col-x">

Well, in order to make the grid responsive, Bootstrap has included the ability for us to tweak the classes by adding a symbol to the class name between the col and the x (that is, an integer from 1 to 12).

For example, here is what the column element's class would look like with one of these symbols (in actuality, it's not a symbol but rather a new class name—however, for the purposes of explaining it, you can think of it as a symbol):

<div class="col-sm-4">

I'll explain what the sm in col-sm-4 means in a moment, but, in practice, you'll see more than one class name on a column element. For instance, here is a likely set of class names on a column element:

 <div class="col-xs-12 col-sm-4 col-md-3" >

OK, let's decipher what this set of classes is for. To do that, let me first list the available symbols and what they mean:

In the preceding table, in the third row from the bottom, I've listed the five symbols that are available to you. In the second row from the bottom, I have listed the typical target devices for which the symbol, and thus the grid-breakpoint, applies. I'll discuss the grid-breakpoint in a moment, but I just wanted to say that these target devices I've listed are rules of thumb—they are not set in stone. For instance, Android tablets are listed in three of the five viewport size columns. This is because there are many Android tablet manufacturers and even more sizes of displays (that is, viewports) that they come in. The same can be said for laptops. However, the viewport sizes on Apple-based products are well known, and fewer in number—and is why I listed them by name. Suffice it to say, by taking a look at the typical device's row, you can get a fairly good idea of what column class you probably want to use.

Armed with this knowledge of viewport sizes and the previous table, let's now decipher what this column element and set of classes mean: 

<div class="col-xs-12 col-sm-4 col-md-3" >

This column element contains a set of three classes, and each class basically instructs the browser on how to render the column and its contents depending on the viewport size. As an aside, technically speaking, the viewport size is the maximum dimensions (in pixels) of the display. Taking the case of a 13-inch laptop monitor with its resolution set to 1600 x 900, its viewport size is 1600px wide by 900px high. Practically, however, the viewport size is the dimensions of the browser window, and not the laptop's display itself. This is an important distinction when we talk about responsive web design because, when using a desktop or laptop computer, people can resize their browsers—which forces the web page to be re-rendered—and, hence, this is truly what the viewport size is, from Bootstrap's perspective, and for our purposes.

Coming back to the deciphering of the previous column element, while referencing the previous viewport size table, and having mentioned how the resizing of the browser dictates the viewport size that we, as developers, care about, we can now decipher what these three classes are instructing the browser to do:

• col-xs-12: This tells the browser that when the viewport is fewer than 576 pixels in width, the column should span all 12 columns. In other words, the column should consume the entire available width of the row.
• col-sm-4: This tells the browser that when the viewport is between 576 and 767 pixels in width, the column should span four of the 12 available columns. In other words, the column should consume 1/3 of the row's width.
• col-md-3: This tells the browser that when the viewport is 768 or more pixels in width, the column should span three of the 12 available columns. In other words, the column should consume 1/4th of the row's width.

We could have controlled the rendering of the column for viewport sizes 992 or more pixels in width by adding the classes with the class prefixes .col-lg- and .col-xl-, but, in the example we've just seen, we didn't seem to care—which is to say, no matter how wide the viewport is (even 2400px!), our column's width would scale to consume 25% of the row's width.

And that, ladies and gentlemen, is how you can design a web page while maintaining how the contents in your grid's cells are to be rendered on thousands of viewport sizes. By leveraging Bootstrap's grid, we no longer need to code up several variations of our web pages to get them to display the way we want on different sized displays. Pretty darn cool, ain't it?