2.2 Bootstrap Review
In this lesson I’ll perform a quick review of the Bootstrap grid system and then outline a strategy for how we’re going to use it within our design.
1.Introduction2 lessons, 05:34
2.Structuring Your HTML9 lessons, 1:03:52
3.Styling the Page5 lessons, 43:27
4.Conclusion1 lesson, 00:31
2.2 Bootstrap Review
If you've never used Bootstrap before, then it would benefit you greatly to take a look at a beginner's Bootstrap course. Or to at least read the basic documentation in Bootstrap to become familiar with it. Now we're not gonna be using everything within Bootstrap. In fact, for the most part, we're really only gonna be using the grid system and a few elements such as buttons and input fields. But for the most part, that's really all we're gonna be using. So, if you just brush up on your knowledge of the grid system within Bootstrap, then that will get you most of the way there. Everything else you should be able to pick up just fine by following along with these videos. Now just as a quick refresher on the grid system, remember that the Bootstrap grid system is a system of 12 columns. And when you're laying out your own website, when you're laying out columns within your own website. You're going to specify how many columns of that 12-column grid system you want each of your columns to span. So if you want a two-column setup on your page, for example, and you want those columns to be equal width. Then each of those columns is going to span six of the 12 columns of the Bootstrap grid system. So all of these columns are gonna be contained in divs, with a class of row. And these rows are going to be contained in a div with a class of container. Now these containers have a fixed width and that's what's going to restrain the width of your content to a certain area of the browser. And by default that's gonna be centered in the browser. Anything outside of a container is not going to be constrained. So if your put something outside of a container when you're using Bootstrap then whatever is outside the container is going to reach the edges of your browser window. But everything inside the container will be given a fixed width, and then each of our columns we're gonna use classes such as this one here, for example, col-md-4. This is telling us that with the medium sized browser that's the md is for. This particular column is going to span four columns of the 12 column grid system, which would be one-third of the width of the entire container. And so, there are different labels here in the middle, so we have col-md for medium size and larger. But we could also use col-sm for a browser of a small width. There's also xs for extra small. If all you specify is col-xs and then a certain number, then that particular column will span that number, no matter what size the browser is. But if you also include one of these medium columns for example, or even a small or larger, extra large column, then at that break point it will change its width. So, it is responsive that way. And we might see some examples of that as we move forward, but we're not going to cover it in great details. So again, it would benefit you greatly to go through and review how this grid system works before moving forward. But if we jump over to our Photoshop file. We can talk about how we're going to strategize the basic layout of our website. So, we see certain things like our nav bar up here at the top, our main menu item. Now, Bootstrap does have a main navigation element. A menu bar that we can fix to the very top of the window and we can certainly do that for our website. Now, we're gonna have to customize the way it looks a little bit, but it would give us a good starting point anyways. Now, you'll notice again this nav bar takes up the full width and then the content inside the nav bar is contained within a smaller area. Same with the rest of out content, you'll notice the left and right edges of our content here match up with the left and right edges of our nav bar. So when I see something like that and I'm using something like Bootstrap I immediately recognize that this section here, I'll just outline that would fit inside one of our container divs in Bootstrap. Our nav bar at the top is going to have to be outside of a container. But then inside that nav bar, we can have a container where we put this content. So as you scroll down a little bit. We can kinda get an idea of how our columns are gonna be laid out. So, here we have a three column set up. So once we get down to this section, we'll have three separate Bootstrap columns here, each with a width of four. Because it's going to span each of these columns, I should say, is going to span four of the 12 columns of that grid system or one-third of that container. So we can scroll down a little bit further and here we see a section that takes up the full width of the browser window. It goes all the way to the left and right edges. So, we'll talk about how to tackle that once we get there. But for the most part, we see all over this content is contained within a certain width. Now, here we have another example of content that goes all the way to the edges within this background image there. And we have a couple of these blue sections here that extend all the way to the edges. So anytime you see something that extends to the edge you know that, that's something that needs to be outside of the container. Outside of a Bootstrap container, and then the content inside that div can be placed inside a container to limit the width of it. And this particular section is gonna be a little bit tricky the way we're gonna put it together, but we'll get to that a little bit later on. So again, we have a lot of sections here. Most of its gonna be contained inside of a container and anything, again, that goes outside the bounds of that container would have to rest outside whatever container div you're using. But that's basically how we're going to tackle this website. And we're gonna move from top to bottom as we start laying up the HTML and then we'll jump into CSS to start styling it. So thank you for watching and I'll see you in the next lesson.