FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Adjusting for Multiple Screens

The grid system is probably the most difficult aspect of the Bootstrap framework to understand. In this lesson, we’ll modify our layout to be responsive and adjust to different screen sizes.

Related Links

4.2 Adjusting for Multiple Screens

In the previous lesson we started looking at Bootstrap's grid system and we created a web page that has three rows. The first row has three columns in it. Each of those columns are equally sized. The second row has two columns and once again, those columns are equally sized. But then on the third row we have just one column, and it is offset, and the offset does not equal to the size of the row, but the offset and the cell itself equal 12. Because that is the maximum amount of units that a row can be and all of our other rows are 12 units wide as well. Now if we look at this in the browser, we see that exact layout. We have our three equally sized columns. We have our two equally sized columns. Then we have our one column that is offset. And as we grow the size of the window, nothing really changes. But if we shrink it, then we're going to see that our columns are no longer columns, they are our individual rows. And the reason why this happens, is because our columns cannot fit within that size of a screen. So Bootstrap just switches everything to individual rows so that they can all fit on the page. Now sometimes that's what we want and eventually that's what we want. Whenever the screen size is small enough, this is really probably the best thing for it. But there are certain sizes that we can also plan for so that even though the screen size gets smaller we could still retain our columns. And the way that we do that is just by specifying those smaller columns. So we are using the medium columns for a smaller size desktop. Let's also include the small columns. That is col-sm. And then let's use the same column values. So we're going to have both the medium column of four and the small column of four for this first row. Now what this is going to allow our layout to do is as our screen shrinks in size, the columns are going to retain. And you can see that happen here. Our first row is now back to an actual row of columns and if we grow the size of the window, it's going to retain our three columns. If we shrink it, it's going to stay as three columns until we reach a size that is small enough that even the smaller columns won't fit. But notice how our first row is three columns and then we have the vertical layout here for our, what is essentially the second row, and then the third row. So we can also go to our second row, and we can use the small columns here, but let's not do that. Let's use the extra small. So that is col-xs, for extra small, and then 6. And we will use that on the other div element. Now, this is going to allow that row to remain as two columns for a very long time. If we shrink this, now our first column is now broken up into those three different rows, because the small column size is too big for the size of the window. But notice now that we still have our two columns in this single row. And if we keep shrinking the size of the screen, we have that until our screen is just too small and we can't do that here with the browser window. So in this case, our second row is going to retain its column layout regardless of the size. And we can do the same thing with the third row. We have an offset using the medium column size and we have also specified the medium column size for the amount of units that column expands and we can come in here we can do the same thing. We can say col- or we could use the extra small, and then 8, and then we can also use the offset which is col- xs offset 4. But let's not do that. In fact. let's go back to our second row. Let's say that this second row while it is broken up into two equally sized columns. Let's say that for medium sized screens or bigger. That's fine, we want them to be the same size but let's say that on the left hand side. We have some main content and on the right hand side we have some sub content and whenever the screen sizes smaller we want the main content to be larger than the sub content. Well, we can come in here and we can say that okay, for the extra small we could have that be extra small 8. And then for the sub content we can see that that is going to be extra small 4. So now when ever our screen size is large enough for the medium sized columns. Both of those columns are equally sized but if we start to shrink the size of our window. Well then our column layout changes. The main content, the column on the left, is now larger than the one on the right, and that's because that's what we specified. When the screen size is too small for our medium columns, then, the setting for the extra small columns takes over. And it sets the left hand column to be eight units, right hand column to be four units. And as we shrink the size of the screen, it retains that column layout. And then, as we grow it back to a larger size, then the columns go back to being equally sized. Now, admittedly, there's still some complexity here because you have to plan your layout. You then have to decide what types of columns that you want to use do you want to use medium here extra small here large here. And you also have to choose the sizes. So you have to plan and you also have to play around. But of course the more experience that you have using Bootstrap, the easier it is. So as with everything, practice, practice, practice.

Back to the top