7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 The Grid System

Hey, welcome back. In this lesson, I'll show you how to use the grid system inside Bootstrap. And this is a great system. It's mobile first, which means it starts off as a fluid grid system with each column stacking on top of one another. And then as the viewport size increases, it will scale up to 12 columns. So, using the grid is actually very simple. First, you must start with a div class container. And inside this one, you're gonna put your rows and your columns. Next, these columns must be wrapped in a row element. And this will ensure they have proper padding, they clear some floats, and so on. So you would do div with a class of row. Now, depending on the content or depending on the layout you need for your page, you will use a certain number of columns for each section. So let's say I wanna divide my page into areas. Well, I would do col-lg-6 times 2. So now I have two divs with a class of col-lg-6. So, Col lg 6, and just gonna put here, and Col lg 6. Now, I'm just gonna refresh this, and notice my content is divided in two. Now I added this dark background so we can actually see the columns, but in reality, the grid doesn't have any background. You can add that yourself if you want. What about, let's change this. And let's call this First and Second. So let's say I want a smaller first section like two columns, and then ten for the second area. Refresh, and notice now this first is smaller and the second one is bigger, and notice everything I do basically adds up to 12 columns. So, I can basically do stuff like this. 6 here, and I'm gonna do col-lg-4. And this will be Third. So now I have a section which spans two grid columns, and then the second one which spans six grid columns, and a third one which spans the remaining four. And if I change this to 2, we get an incomplete row, right? There is room for two more columns here on the right. So hopefully, that gives you an idea of how this grid works. Now, this grid. Let's let's actually revert back to 4 here. This grid has like a fixed width, and that width is given by the container class. Now, I can change this to a fluid grid by adding -fluid to the container class. So now, it spans the entire width of my page, and it resizes accordingly, as you can see here. So, that's how you create, basically, a fluid grid system. And the rule is the same. You must use certain number of columns that add up to 12. Now, another cool thing about the grid system is that you can offset columns, meaning. Now let me give you an example. Let's revert back to, to a normal grid here. So a fixed grid. And I'm gonna add another row. And then I'm gonna say col-lg. Let's do col-lg-2. Let's say Test offset. Let's see it. Okay. And now, let's say I want to move this, like two grid columns to the right. So I would say col-lg-offset and the number of columns, which is 2. Refresh. And now this is moved to the right by two columns. I can even do offset-10, and that's gonna move it all the way to the right. Now, if I add another div here with a col-lg-10, for example, and I refresh, notice we have a bit of a problem because now the width is no longer 12 columns, but I have 2 here, 2 from the offset and 10 from this, so it's 14. But if I do 8 columns here, then I'm gonna have 12 in total. So, my layout will not be broken. So, you must consider this when offsetting columns. Another thing you can do with grids is nesting, which means inside a column, you can put another row. So for example, let's do another row here. And let's say col-lg-6 times 2, and we're gonna call this Level 1. On both of these, let's refresh. And now, inside the first one, I'm gonna add another row with col-lg-4 plus col-lg-8. And don't forget to put the dot sign here. Okay. So this will be a Level 2 and Level 2. Refresh. And there it is, the nested row only spans half the width of my page because it's nested inside this col-lg-6. And the rule is the same. Whatever you do in the nested row, you must add up 12 columns. So you can do combinations like three, nine. It doesn't matter as long as it adds up to 12. Now, that's basically how you use the grid. And notice I'm using the following notation, col dash lg dash the number of columns. Now col, of course, this is the normal this is how you're telling Bootstrap you wanna represent grid columns. The 2 is the number of columns, but the lg actually stands for the viewport size you wanna create those columns for. So in my case, lg stands for large desktops, and because the grid system is responsive, it has various styles for different viewport sizes. It has one for medium sized devices. It has one for small devices like tablets. And it has one for extra small tablets like, extra small excuse me, sizes like smartphones. So, let me give you an example. If I bring up the Inspector here so you can see the viewport size. Look on the top right corner here as I resize my page. [BLANK_AUDIO] Yea, notice at 1,200 pixels, there is a change. See? Now, at 1,200 pixels, this is called a breakpoint. And at this breakpoint, the widths of the grid elements change basically. And if I take a look now, all of my columns are stacking on top of one another. And I can rectify that. Let's say that on this particular viewport size, I want my columns to be just like they were on the bigger size. So, I would go here and I would say col, md for medium, 2. And that means on a medium size screen, use two grid columns just like this. And on a large size screen, use two columns, col-md 6 and col-md-4. So now, if I refresh, my first row will be just like before. Whoops. See? [BLANK_AUDIO] Okay, now, you don't necessarily need to use the exact same number of columns. For example, on the medium size, maybe I want the first column to be 6, the second one 2, and the third one 4. So, notice we have different sizes for them. [BLANK_AUDIO] But here's the thing. If you, you're gonna use the exact same number of columns, then the bigger size is not necessary. So I can delete this one, and I can delete these other two. All right? So this means that on medium and large-sized desktops, I'm gonna use this column configuration. The same goes for if I do xs here, and xs here and here. It means on extra small, small, medium, and large, use this column configuration. So I hope that makes sense. And this is a really great system because it allows you to create various layouts depending on which device you're viewing your website on. So, if it's a mobile device, you might want to stack all of these rows of these columns. Excuse me. On a tablet, for example you might want to have a six by six configuration. So, six columns on the left, six columns on the right. And maybe on a large desktop, you might want to split your content into three areas instead of two. It's really up to you. It's really up to the content you're creating. So, with these changes, if I refresh my page and start resizing, notice that on all screen sizes, these will stay the same, right? They will not stack. Instead, they will stay on three separate areas. Okay, cool. Well, that's basically it for the grid system. This is a really powerful component. There are more things you can do with it like pulling and pushing columns, which basically means reordering them. But you can read about that on the Bootstrap website on the documentation. Now in the next lesson, I'll talk about some common elements that you would use in virtually any Web page, buttons and icons.

Back to the top