Understand the Bootstrap Grid system

[00:00] We'll start out with an empty HTML template. If we go to the getbootstrap.com, we'll find links to set up Bootstrap. We can simply take this and copy/paste into our header. This will complete our Bootstrap setup.

[00:15] Before moving further, we'll set up a few styles. We'll make styles for three columns, and give them different background colors. Let's switch back to our index.html.

[00:29] When we are using Bootstrap, we should start with the container. The container is the wrapper that wraps our whole HTML application. Inside the container, we can define different rows and columns. First, let us make a row. Inside this row, we can place a number of columns. Let's add some container into this row.

[00:59] As you can see, a row takes up full space from the left to right. Now, we'll make another row beneath the former row. We will add three columns into this row, and assign our styles. Let's add some container into these columns, so that they show up in the page. Let's copy/paste this into the other two columns. Let me format this.

[01:33] As you can see, the background colors did not reflect. That is because we forgot to link a style sheet. Now, as you can see, the styles have been reflected. As you can see, the different columns are stacked one upon the other inside the row. This is not the intended behavior. We want them to act as columns.

[01:57] We'll fix this by using the Bootstrap grid system. Let's add a new class to this and check the result. We added a class, .col-xs-3. As you can see, the whole division has collapsed into a column. The Bootstrap uses a 12-point grid system. As we have used the .col-xs-3, it takes up three points of the total 12-point grid system.

[02:29] We also have other tags like the sm for small, the lg for large, and the md for medium. As you can see, only x3 works over here. That is because the browser has been contracted, and these specific dimensions are related to the mobile dimensions, which is the extra small.

[02:54] We'll add the same class to the other two columns and check the result. As you can see, there is some gap remaining over here. Remember what I've said. The Bootstrap uses a 12-point grid system, and here, we are using xs-3. Three, plus three, plus three is nine. There is another three that is missing. That will be accommodated for free space.

[03:24] You can also play around with this number. It can vary from 1 to 12. Let's say we change this to one. The width of the column is reduced to one point. Now, if we make it six, this should take up the whole row. As 3 plus, plus 6, plus 3 is 12, the three columns take up the whole row.

[03:51] Now, let's make this more responsive. Usually in mobiles, elements are stacked one upon the other. We'll make sure that all our elements take the whole 12 points of the grid. You can see that each element has occupied the whole row.

[04:10] Now, we'll add a class for the medium size, and make it four. If we go ahead and expand our browser, you can see that we will eventually hit the medium size, and each element will start occupying four points of the total 12-point grid system.

[04:40] If we change this back, it should fall back to the extra-small version.