Nesting Bootstrap containers inside each other

Hi, my name is Dan and in this video we're gonna look at  nesting craziness with a bit of centering stuff. Okay? Um, what we need to do is, um,  with my Photoshop mockup there is, there,  you can see I've got some icons  with some texts underneath it. And over here though, in my mobile layout, the uh,  icon ends up being on the left and the text on the right. Now, um, what you might do is have two rows  of four columns, okay? The problem with that is that when they break down into  that smaller view, they don't line up next to each other.

Let's demo that and then look at the way we're gonna do it  with our craz nesting. So first of all, I would like to find my, uh, go  to my CSS designer, main CSS  and under my selectors, I wanna find the  one that is for services. And I'm gonna click show, set and scroll down to my color. And remember, I don't wanna delete  it, I just wanted this one here. It says disable it. Okay, so it goes away,  but I can turn on really quickly if I, if I delete it,  it's gone forever and it's a little hard to get back.

So I'm just gonna do this so  that we can see the text in here. 'cause at the moment the default text is a kind of a light,  uh, dark gray and it's very hard to see against that purple. So what I'm gonna do is inside of, uh, all of these columns,  I am going to paste, I'm gonna insert a paragraph,  I'm gonna nest it inside and you can see my,  So I'm gonna put my icon one, okay. And then over here I'm gonna insert  and put in my, we're gonna put out images properly,  but I, I guess I just wanna show you, uh,  there's my icon two  Click over here, click in this one. Insert paragraph. This is gonna be My icon three.

Icon three,  insert paragraph, nest inside, double click  Text. Call  this one icon four. So those are the four icons. Those are just representing these kind of colored,  um, uh, images here. So underneath that though, so  what you could do is grab the whole row and duplicate it. So clicked on the row and then I've clicked add new row.

Just great. Okay. Actually what I wanna do is duplicate that row. So I'm gonna click on the row and there's an  option here that says duplicate. Great. So down here,  this is when it can be my text one.

So this  Is gonna be text one. This is  The corresponding text underneath them, right? So the trouble is later on we're not doing mobile yet,  but um, these are the kinds of things. Once you've gone, gone through this whole course, you have  to start thinking and projecting what's gonna  happen in the smaller views. So watch this. If I preview on a browser  And save, okay,  Watch this when it's a desktop view, perfect icon one  and text, um, one are together.

Same with icon two and the text two, watch. What happens when I break this down, can you see? They end up all the icons  because they're on that first row of all stacked on top  of each other and all the text  is stacked on top of each other. Okay? What I really need is the icon  with the text still with it. This icon two with the text, still with this.

So you can see over here, they need to be together, but  because they're in these two rows, okay,  that row ended up collapsing on top  of itself and this one does. So we're gonna do some, uh, fun nesting. So I'm gonna undo, undo, undo, undo, undo  until all of this is gone. I'm using the shortcut of Command Z or Ctrl Z on a pc, okay? Until all of those are gone. So I've got  my first row with my columns.

What we're gonna do is inside this first column,  we're gonna put another rowing column. We're gonna nest one inside of it. So let's go to insert. I'm gonna put, so I've selected my column there. I'm gonna insert another row and a column in there. It's gonna be inside of it  and it's just gonna need to be, what is it gonna need to be?

It's gonna need to be two columns. Click Okay. So inside of this guy, I've got this kind of mess  of nesting now, so there's my row,  okay, the one that I just made. But then there's the parent row, which is the kind  of bigger, larger one with this column. And then inside of him, there's a row and a column. Now what I wanna do is watch this.

He is now six, which just means he's half  of the parent row, okay? The parent container column, sorry. And watch this photo, drag it up to 12,  Click on you, drag him out. You see, he's 12. So it's not the full grid, but it's full for him. He's a, it's the full width  of his little boundaries in the world.

And that's the column that he's in. You can see this guy is six, so I've spread him out. So what's gonna happen is in large view  or desktop view, I'm gonna be able  to have my icon on the top and the image and the text below. And what will happen though is when it collapses down,  it'll mean that these two guys hang about together  because they're jammed inside this column. Okay? So they can't kind of split like the other ones did.

So you'll get to a point where you start making parts  of columns and you'll start testing on mobile  as you're building because there's no point going through  and designing it all and desktop only have to come back. We've separated them into this course to be separate just so  that I can define some areas to kind  of go into detail rather than trying  to throw it all at you in one go. Alright? So I think I'll actually save the centering  for another video just to keep it nice  and separate so you can find it again later. Alright, so that's how to nest columns  and rows inside other columns and rows. Now if that freaked you out a little bit  and it's all a little too hard, don't worry.

Not all sites need to have this kind of nested, uh,  rows inside other rows. So if you are really new to web design  and bootstrap, you might skip this little bit  or grab the, uh, project files afterwards  so you've got a working version to see how it works.