FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Bootstrap Basics

In this lesson you will find yourself using Bootstrap to lay out the content for your project pages. You can certainly follow along without using Bootstrap if you prefer to style everything yourself, but I'll be using Bootstrap, and in this lesson, I'll show you how to set up your web page to use it.

2.3 Bootstrap Basics

Hello and welcome back to Scroll Events Made Easy. As we've all ready discussed, we're gonna be using the Bootstrap framework for very quickly and easily laying out our content. And the reason I want to use Bootstrap is because in this course, I don't want to get bogged down in styling up every page to make it look beautiful. Because what I really want to focus on in this course is the effects that we're going to be creating. This course is meant to be a course for designers, but it's not a course on design. So we're not gonna get really heavy into designing the most beautiful page in the world. We really just want to cover what it takes to create some of these scrolling effects very easily using these frame works. So again, we're gonna be using Bootstrap as a very quick way to get us up running with our HTML, so if you go to get, you can gain access to all the documentation, Bootstrap is a free frame work you can download it in their site. Or you can link to it via CD and as we did, but at, you'll find all the documentation you need to learn more about Bootstrap, and you can do a lot with Bootstrap, not just styling but also some functionality stuff, some JavaScript stuff that won't require you to write your own JavaScript, so if you go to the getting started link, it will give you some information some basic information on how to get up and running with bootstrap. And then once you get over to CSS components in JavaScript, that's where you're gonna see most of the documentation. So if we go over to the CSS link and to click on the grid system. This is the kind of the backbone of the bootstrap CSS framework. It allows you to very easily layout your content on the page without having to create your own floated columns and all this other stuff. That takes care of all of that for you. So the grid system, if we scroll down a little bit, we can see an example of it. The grid system is composed of 12 columns and you can combine any of those columns to make a larger column. So, as you see right here, we have 12 columns side by side. And we can combine any of those columns to make larger columns. So you can see, each one of these takes up one unit of that 12 column grid system. If you come down here, this one has a class of .col-md-8. And that's all these are. These are CSS classes, which if you apply to a div in your HTML, it will apply the necessary styles, so you don't have to type them all out yourself. So if you want a column that takes up two-thirds of the width of whatever your styling, then you would give it a number 8 here at the end. It will take up eight of the 12 columns of that grid system. You'll notice, there's also this 2 character part in the middle, the md stands for medium, there's also xs for extra small, sm for small, md for medium, lg for large, and xl for extra large. That two-character code there determines how large this is gonna be at a medium browser size, for example. And you can read through all the documentation to see exactly where those break points are, but by default, if you just give a column a class of col-md-8 for example, that means at any browser size, from medium on up to extra large, this column is going to take up eight columns of the 12 column grid system, so it will take up two thirds of the width. Anything smaller than medium. It's just gonna jump up to a full width column that takes up all 12 columns of the good system. Now, you can specify by giving it more than one class. You can give your div, for example we have this div down here with the class of .col-md-1, you can give your div's different classes. You could give it a class of .col-md-8 as well as a class of .col-xs-6, which means that anything from extra small on up is gonna take up six columns or half of the width, until you get up to the medium browser size and everything from there on up is gonna take up eight columns or two thirds of the width. So hopefully that gives you a good idea. Of how that column system works. And as we move forward, which we start type out some of this HTML. You're gonna understand it a lot better, so practice makes perfect when it comes to that. But if we come down here to this example which mobile and desktop, you can see just what I'm talking about. This particular column has two classes. A class of .col-xs-12 and another class of .col-md-8. Which means that from a medium browser size on up, it's only going to take up two thirds of the width. But anything smaller than that, it's going to take up 12 columns, so it will take up the full width. So we can see that in action if we re-size our browser. So we start bringing it down, and we are going to have to scroll down to keep up with it, because our content is going to keep moving down as we re-size. And you can see that we've now hit that break point, because this column here, which used to take up two-thirds of the width, is now taking up the full width, so it has triggered that smaller a break point just below where that medium break point is. And now it's taking up the full 12 columns. As you can see with the second column, when it was at a larger browser size, it only took up one-third of the width. Now that it's at a smaller browser size, it got below that medium brake point, it's now taking up half the width that has col-xs for extra small six. So everything from xs, all the way up to that medium break point, it's going to take up half the width, and from medium on up, it's gonna take one third, so that's how that column system works. Now keep in mind, that we need to include are columns inside rose, so we have a div with the class of row here inside that row, we have a couple of columns, and these columns behave differently, so we have different browser sizes. And then usually we'll contain these rows inside a div with a class of container, and I'm not sure if there's a sample of that here. But there are two different types of containers, there's a default container which has a maximum width, and then there is a fluid container. The default container has a class of container and a fluid container has a class of container hyphen fluid. In fact, I can probably search on this page and find container hyphen fluid. Yeah, here it is right here. So, if you wanted a container with a maximum size, you would use this class here. If you wanted a container that took up the full width of your browser or the full width of whatever container it's inside, then you would use a class of container fluid. So, again, hopefully you'll get more comfortable with this CSS system. As we move through and start coding our website, but I just wanted to give you a brief overview, so that you'd at least understand how the basic at least of how that grid system works. Now let me go ahead and point out that you can go through on this menu up here at the top, you can go through and see all the different components of Bootstrap. And it's really easy to navigate system. So if you go to CSS, it's a really long page, but it's got this nice little menu over here on the side to help you navigate through it a little easier. So if you wanna see all the mark up you need to get your forms styled appropriately, you can click on the forms link, and it will scroll down to that. Area. And as you can see, it has some really nice default styles for forms. So, again, Bootstrap is not just for layout. And it's got some really nice default styles with it, some nice default fonts, etc., etc. But the layout, for me, is the big reason I want to use this for this course, because it really makes that easy. So as we move forward again, we're gonna learn more about Bootstrap, and in the next lesson we'll start coding the HTML for our site. Thank you for watching, and I'll see you then.

Back to the top