From the course: Bootstrap 4 Essential Training

Nested columns - Bootstrap Tutorial

From the course: Bootstrap 4 Essential Training

Start my 1-month free trial

Nested columns

“

- [Instructor] You can easily put a whole new grade of columns inside an existing column. Now, that's called nesting. So, let's take a look at how that works. To nest columns, you simply create a new row inside an existing column. Now, this will create a new regular 12-column grid inside that existing column. And inside that column, you can use the same set of classes that you've been using so far. So, let's take a look at an example. Now, here I have a simple layout with a col-sm-8 inside a row, as well as a container. I do have a couple of classes here, just to make my images not go crazy. Pretty much, this image right here. And what I'm going to is create another row right here. Notice that I have a row, and then an 8-unit column in this small break point. And then I have a 4-unit column, also at the small break point. So, to create a new row, I can just create a div with a class of row right here. And let's go ahead and close that out. And, always a good idea to just put a little comment, even if it's just this right here. Let's go ahead and add a section in here, as well. Just a comment right there to make things clean. And, what I'm going to do here, is inside this row, I essentially have a new 12-column grid, so I can use anything that I want to. I'm going to use a div with a class of col-sm-4. So, it looks kind of like what I have up here. But this section, right here, is taking 4 of the 12 units. This col-sm-8, takes the rest of units. And, essentially here, I'm going to start off with a brand new grid. So, col-sm-4, and let's go ahead and close that div out. To have something in here, I'm going to create an image. This image will just point to, sort of, our fake image. And right now, there's only one, right? Because it's the only one in the existing column. And also, what's happening is, we're not in the small break point here yet. So, if I make this a little wider, you can see that this image is sort of taken up the entire eight columns, of the 12-column grid. And then, I have another, sort of, thing taking up the rest of the columns. And then, because I've created a new row, I have a new grid. So, let's go ahead and just grab, and make a few of these here. And you can see that, for every one that I enter here, it's taken up a new unit. Now, the problem is that, for any grid element, there's a default 15 pixel gutter in between. I can take care of that by adding the no-gutters class right here. That kind of deletes the space in between the gutter. You can see that since I'm using the col-sm-4 here, that my images are taken up a third of the room. So, let's go ahead and add some classes here, that will make this a little bit easier to see. So, I'll do a class, and I'm going to use the img-thumbnail class here. So, what that does is, it give us these nice images that are responsive. And it gives us a little border, so we can see them a little bit better. We could've used img-fluid, but it would've been hard, because these would all kind of run together. So, you could see that we have another, sort of, 12-column system here. And if I add ... Let's go ahead and add a couple more, so we have six. You can see that they take up the right amount of room. And everything is still responsive, so when we make this smaller, these images are taken up, essentially, the entire width. So, if you want to do something a little bit better, let's go ahead and turn off our Word Wrap. So, there's all the 4-columns. Let's go ahead and make this look a little bit better. And you can see that I can use multiple columns as before. So, here, I can use a col-2 to make sure that normally these items take up two of the units. And, but when we get to the small break point, they're going to take four of the units. So that means that they'll go three up, like this. So, what this does, that is different is, when I go to the sm-breakpoint, right, these are going to take up two of the units. So, they look a lot nicer now, when they are in, you know, sort of this smaller width right here. So, anything that you can do with your grid, you can do in this new section, in this new row. And all you have to do is, sort of, insert a row inside an existing column, and you get a completely new 12-column grid to work with and then you can use whatever classes you want.

Contents