Basic grid layout - Bootstrap Tutorial

- [Instructor] Bootstrap's Grid is designed around a responsive 12 column system implemented through Flexbox. So let's take a look at how it works. The Grid system has three main components. We discussed the container class at the top of this course. In addition to that, there are also two classes called rows, as well as columns. Now each one of those classes will allow you to set up the Grid system. Now there's also classes that relate to both Flexbox and Grid, and you can combine these classes with the Grid classes, but Grid is the main layout structure. Here's how a basic Grid would look. You would create a div with a class of container and inside that you would create one or more rows. And inside those rows, you create additional columns. There's a lot of different options to these different parts, but this is the sort of most minimal Grid that you can create. So let's take a look at it in action. Going to take a look at what I've done here, which is just create three columns, and to do that, I created a div with a class of container that makes it align to the main Grid system. And inside that, I have a single row. So the row is what allows these three elements to appear. If I created another row, and if I repeated these three items, it would be three items, but it would set up a new Grid. The rows essentially prepare the columns for display and the columns would hold the contents. You could see that we have the call classes three times in here with some text, and that is what displays the elements. Okay, let's review the container metrics. We've seen these before. And essentially what happens is that the regular container class will be a hundred percent of the width of the container minus a little bit of space around the edges. You saw that in the example, there's a little bit of space around the edges when you use any of the container classes. Whenever your viewport reaches 576 pixels or greater, the content will lock into a width of 540 pixels, in the case of this regular container. When the width reaches 768 pixels, the content locks into a width of 720 pixels, and it doesn't grow any larger than that. And so on and so forth when the window or the width of the browser, when the width of the viewport reaches 992, it locks to 960, et cetera, et cetera for all of these different measurements. Now, if you add any of these size attributes here, then the Grid will remain at a hundred percent of the width of the container plus that little bit of extra room on the sides until it reaches a certain break point, and then it would lock in to that size. So 724 has 768 pixel size and larger. And it continues to do that for all these different sizes. Now container fluid is always going to be a hundred percent of the width of the container or the viewport and it'll still have a little bit of room on the sides. If you want something to go all the way to the edge of the screen, you don't use a container. Let's check that out. So we'll take a look at this and you can see that for this main image, usually known as the hero image, I've just added that image here and I haven't placed it inside a container. I added some additional styles here to make it the full width of the browser here, but you could see that in the next section, this container right here, I've made that container fit the current Grid, and I'm going to take this out of full screen mode so you can see that when I make it a different size, it locks into the different viewport positions. You could see that when I go to a different size, it's going to lock or it's going to jump a little bit and lock into a new size. And that's what it's doing. All these classes will lock in at a certain point, and then when they reach their particular sort of break point, they'll lock into a hundred percent of the width of the container and you can see that happening with all these classes as I make my window smaller. All right, so let's take time to figure this out. We're going to create something that looks like this, an image that is a hero type of image. It'll have some texts in the middle of it, and the image will take a certain size of the sort of height of the browser and then will have another section with some text. So what we're going to do is it create a hero section, add some hero text or the style some hero text, we'll put some body copy inside a container so that it is responsive. And we're going to practice some of the positioning classes that we've learned so far. So I'm going to click on this start button to begin this. And so for this each one, I'm going to add a number of classes here. So I'm going to say d-none that will hide the headline from view for the time being. So actually I need to make sure that I say class equals d-none. That's going to hide that headline, so you can see there, it's gone. And then I'm going to say the viewport width of this element is going to be set to 100 with a padding on the horizontal direction of five. And I'll say display at the large viewport size of blocks. So what that's going to do is it's going to hide the text normally until it reaches the large viewport. So if I make this smaller, at some point, that will disappear, but at the large viewport, that text is going to show up, right, and then it's going to have these attributes, a little bit of padding. Then I'm going to set this font to display three which will make it just a bigger size. I'll do text info so that it is a blue color, font weight bolder, and I'm going to set the position of this element so that will say position absolute so that it is absolutely positioned. Now, I also whenever I do absolute positioning, I should make sure that I have a container that is relatively positioned so that that element moves with something else. So I'm going to grab the image as well as this headline, and I'm going to create a div with a class of position relative. Okay, that's going to cause both of these to move together. So the headline and the image will go in here. We'll close out this div. So now both of those things are related to each other and by setting the position absolute of this headline, it's going to move relative to this bigger sort of div right here. All right, so we are not quite done with all of the styles, so let's go ahead and do read that position absolute. So we'll do top 50, start 50. So when we scroll this, you should see that it kind of starts at the center. You can also positioned at 50% from the left position and the sort of top position here. And what we want to do here is translate middle. That's going to actually now put it in the center. So let's scroll down and you can see now that it's sort of in the center. I think my image is a little bit too large, so we'll fix that in a minute. And also we will say text center, just to add some centering to the text itself whenever it's appearing on multiple lines. So there, you can see that now that text is actually a little bit more in the center than it was a minute ago. So let's go ahead and work on the image 'cause I think it's a little bit too wide right now. We will add a class to this image and this is going to be viewport with 100. I think we could add the image fluid class but this is going to make sure that it's always the sort of width of the viewport, right? And let's go ahead and make this bigger. Now I'm going to go ahead and put this on a next line just so that we can read things a little bit better, and I'll end up adding just a style sheet here to just add a shadow to the text. That's one of the things that I don't see in Bootstrap, a text shadow property, maybe they'll add it at some point, and we are going to add a slight white drop shadow on the text. So there it is. So you can read it a little bit better on this background. All right, for the rest of the text, all I'm going to do here is add a div with a class of container and put all of these paragraphs in there instead of where they were. And that's going to set this up for the Grid for us. And we may want to now give this thing a margin top of three. That's going to give us a little bit of room right here. So as I scroll down, you can see that there's a little bit of room right there, and that I think works pretty well. And that is how you set things up to be maybe, with some items being like in the Grid and some items not being in the Grid, you could also perhaps add a container to this text if you wanted to, so here, in addition to all these, I could maybe add a container, and now the text itself would be fitting inside the Grid. So now this robot, all that stuff happens inside the Grid, and yeah, that looks pretty good.