FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.1 Grid Basics

Bootstrap is a CSS framework that, among other things, makes it easier to write sites that work on different screen sizes. You’ll learn how to use Bootstrap’s grid system to create a basic site layout in this lesson.

Related Links

4.1 Grid Basics

In the previous lesson you saw how jQuery can take something complex, and make no mistake, the script that we wrote in the previous lesson was technically complex. Even though it was just a few lines of code with jQuery, that's what jQuery does. It makes the complex relatively simple. And thankfully we have the same thing with CSS. Now that might sound a little strange because, on the surface, CSS looks rather simple. And whenever it was created, it was, but it has evolved into something that is anything but. And especially if you start thinking about designing the website for all of the different types of devices. Because now we have more than just a desktop, and a laptop, I guess, you could consider those two types of things the same just because of the screen size. And now we have tablets. We have different sizes of tablets. We have phones. We have different sizes of phones. So if you want to design a website that's going to work relatively the same in all of these different screen sizes, then you are in for a world of hurt, without some help. But, thankfully, that's what Bootstrap gives us. It is a CSS framework, and it really goes beyond that, because there are some other things that are dependent upon JavaScript within Bootstrap. And, of course, you don't have to use those if you don't want to, but they are there for you to use. So it is a CSS framework but it's also kind of a UI framework as well. And it does a pretty good job of simplifying a very complex idea, and that is designing a website that's going to work in a variety of different screen sizes. So the first thing we're going to do is look at an HTML file that I already have. Or I thought I did, but I don't. But let's add some content. Lets have an h1, let's say, Bootstrap is cool. And then let's just have a p element that is, some content goes here. And I know I misspelt that, but that's not important because we're going to be deleting this. Now if we look at this in the browser, we have just the plain ordinary styling that is there by the browser, itself. But let's add Bootstrap. So we have that, thanks to Bower. So let's add a link element. Let's set rel="stylesheet", and then we want href="bower_components/ and to bootstrap/dist/css/, and then we want bootstrap.min.css". And that's going to add Bootstrap. If we go back to the browser, we don't have to refresh because brackets automatically updates the page, but we can see that's our styling automatically changed. Not only did the topography change, but we now have a normalized screen. Now what exactly does that mean? Well different browsers do different things, as far as CSS is concerned for the default screen. There will be different margins, different padding, and things like that. What the normalization does is it removes all of that, so you start with a clean slate. That means that no matter what browser you're using and, typically, regardless of what screen you're using, you're starting with the same blank slate. So, just by adding the Bootstrap CSS file, you're going to see some differences within your web page. But, let's go to the Bootstrap website. That's getbootstrap.com. Now if you want to get Bootstrap without Bower, if you want to just download that, then this is where you go. This is also where you go for any type of documentation on Bootstrap. If you click on the CSS link here, this is going to take you to the documentation. And Bootstrap is, it's big. There is a lot of things that Bootstrap does. And we are not even going to scratch the surface of what it can do because we could spend a lot of time talking about Bootstrap and the different things that it can do for us. But in our case we're going to spend our time with the grid system because I think that that is probably the most complex aspect of Bootstrap. Because we have a grid system that works across all the different types of screens. But the only reason why that works is because we have a ton of classes, and that's how Bootstrap works. If you want to use Bootstrap with anything within your page, you're going to have to add some CSS classes. So that's the main thing about Bootstrap. In order to get anything out of it, you have to know the classes, and of that is its API, if you will. Now you can see here that the grid system is made up of 12 columns. So regardless of the screen size, there are 12 columns. Now those columns are going to be different sizes based upon the screen size. So we have extra small columns. Those are for extra small devices, like phones that have less than 768 pixels. Then we have small columns, which are for tablets. Then we have medium size columns, which are for desktop. And then we have large columns, and those are for desktops with larger displays. And you can see the column widths here. Well let's add some HTML. Let's start with a div element. Let's give this a class of container because if you want to use Bootstrap's grid system then you have to start with a container. And then we typically divide our layout into different rows. So we're going to have another div element. We're going to give that a class of row, and inside of this row we are essentially going to have a certain amount of cells. Now what do I mean by cells? Well I'm kind of thinking in terms of a table, where you have your table element, then you have a /tr for the table row, but then you have /td elements for your cells. And this essentially gives you three columns, if you have three cells, and that is what I'm going to strive for here. So we're going to add three div elements. So we'll start with that. That is going to be the starting point for our cells. By themselves, these are just div elements, but we're going to have to add some classes to these elements. So we want three cells, and we have a grid that is 12 units long, so that means that our row has to match up to 12 units. We have three cells. That means that each cell is going to be four units wide. So we are going to add a class, and let's use the medium size cells. So the class is col, column, md, for medium, and then the number four because this is going to span four units. And we'll do the same thing for the other div elements. And we aren't going to actually see any difference inside of the page right now because, by themselves, these classes are only setting the width for these cells. We want some height and we also want some background colors so that we can see the differences. So I'm going to paste in some CSS. There are two classes. One is called my-box-1, the other is called my-box-2. They have the same height but their background color is different. So we are going to apply my-box-1 to the first and third cell, and then we are going to apply my-box-2 to the second cell. So let's look at that in the browser, and that's what we have. And if we resize this we're going to see what Bootstrap does for us. Now we can see that our cells are now vertical. That is because the screen size is small enough that it can't fit those medium size cells now. So it does the only thing that it knows to do. It makes them vertical. But if we increase the window size, then once it can fit those cells on one line, then we see our cells in the column format. Well let's add another row. So we're going to go back to our HTML. We're going to add another div element with a class of row but this time we are going to have a different column layout. Let's have div class=, and we'll have a column that is six units wide, so we'll have col-md-6. Let's use my-box-2 for that div element. And since we have six here, let's have another column that is six units wide. So we are going to have one row that's going to have three cells, then we're going to have another row that has two cells. Let's change that second class to my-box-1. If we go back to the browser, we now see that we have two rows. The first row, once again, has three cells. The second row has one. Now we can also offset our cells if we want a third row. Let's go ahead and do that. So let's add div class="row", and let's say that we also want what is, essentially, going to be two cells, but we really only want one cell. We want to offset the second cell so that we don't have anything here, but we would have this cell. So we can do that by using a class that will offset our cell. So we need to remove this first div element. We'll keep the second one. Let's change this to my-box-2. And in this element, we are going to use another class. It is col-md-offset, and we want to offset this by six. Because once again, we want this row to add up to 12 units. So if we are offseting by six, then that means that the remainder of our row has to be 6 units. So if we go back to the browser, we see that that is what we have. Our first row is three columns, our second row is two columns, but our third row. Is really just one column and it's offset by 6. But let's change this. Let's say that the size is going to be eight and the offset is going to be four. And if we go back, then we can see what that looks like. And as we resize this, we're going to see basically the same thing that we saw before. Everything is going to go from horizontal in to vertical. Now we typically don't want that to happen. Yes, we do, but it would be nice to retain our columns even though we go smaller. And the way that we do that is by incorporating other sizes of the columns. And we are going to look at that in the next lesson.

Back to the top