This is part three of the Bootstrap tutorial. In this video, we'll discuss how to create page layouts using the Bootstrap grid system. One of the very important concepts that we need to understand in Bootstrap is its grid system. The grid system is used for creating page layouts through a series of rows and columns. The grid system consists of twelve columns. As you can see here, this grid system is so flexible that you can create any page layout that you want. Now, let's discuss how to create a three-column layout using the Bootstrap grid system. The three-column layout should be as shown here. The page should be divided into three columns with a 1:4:1 ratio. One important thing to keep in mind here is that if we add the 3 numbers in the ratio 1:4:1, the sum should be equal to 12 because the Bootstrap grid system consists of 12 columns. This means if the left sidebar column is 2 units, then the main content area should be 8 units and the right sidebar column should be 2 units. So, when we add these three numbers - 2 units + 8 units + 2 units - we get 12 units. Bootstrap includes several grid classes for creating layouts for different devices like mobile phones, tablets, laptops, desktops, etc. The table right here shows the available Bootstrap grid classes that you can use to create column layouts ranging from extra small devices like mobile phones to large devices like large desktop screens. We will discuss these different classes in detail with examples in our next video. For now, let's use this class - col-md-* - to create the three-column layout that we want. There are three simple steps to create the three-column layout that we want. First, we...