Nesting Bootstrap containers inside each other

Hi my name is Dan and in this video we are going to be looking at nesting craziness with a bit of centering stuff. What we need to do is, with my Photoshop mock up, there it is there, you can see I've got some icons with some text underneath it, and over here though in my mobile layout, the icon ends up being on the left and the text on the right. Now what you might do is have two rows of four columns. The problem of that is when they break down into that smaller view is that they don’t line up next to each other. Lets demo that and then look at the way we are going to do it with our crazy nesting.

So first of all I would like to find my, go to my css designer, main css and under my selectors I want to find the one that is for services and I'm going to lick show set. And I'm going to scroll down to my colour and I won’t want to delete it, I just want this one here that says disable it. So it goes away but I can turn it on really quickly. If I delete it, it gone forever and it’s a little hard to get back. So I'm jut going to do this so we can see the text in here because at the moment the default text is a dark grey and its very hard to see against that dark purple. So what I'm going to do is inside of all of these columns, I’m going to paste, I'm going to insert paragraph, I'm going to nest it inside and you can see my, so I'm going to put my icon one. And then over here I'm going to insert and put in my, we are going to put in our images properly but I guess I just want to show you, there’s my icon 2, go over here, click in this one, insert paragraph, this is going to be my icon 3. Insert paragraph, nest inside, insert text, and call this one icon 4. So those are my four icons, these are just kind of representing these four images here. So, underneath that though, so what you could do is grab the whole row and duplicate it.

So I've clicked on the row and I’ve clicked add new row. Actually what I want to do is duplicate that row so I'm going to click on the row and there’s an option here which says duplicate, great. So, down here, this is when it is going to be my text one so this is going to be text one. This is the corresponding text underneath them. So the trouble is later on, we’re not doing mobile yet but these are the kind of things, once you’ve gone through this whole course, you have to start thinking and projecting what’s going to happen in the smaller views. So watch this, if I preview in the browser, hit save. And watch this, when its desktop view perfect, icon one and text one are together, same with the icon2 and text 2. Watch what happens when I break this down, can you see they end up, all the icons because they’re in that first row, have all stacked on top of each other and all of the text ahs stacked on top of each other. What I really need is the icon with the text still with it.

This icon 2 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, that row ended up collapsing on top of itself and this one did. So we are going to do some fun nesting. So I'm going to undo, undo. Till all of this is gone, I'm using the shortcut of command z or control z on a pc, till all of those are gone. So I've got my first row with my columns. What we are going to do is inside this first column, we are going to put another row and column, we are going to nest one inside of it, so lets go to insert, I'm going to put, so I've selected my column there. I'm going to insert another row and a column in there, its going to be inside of it and its just going to need be 2 columns. Click okay, so inside of this guy I've kind of got this mess of nesting now. So there’s my row, okay the one that I've just made. But then there’s the parent row, which is the kind of bigger, larger one with his column and inside of him there is a row and a column. Now what I want to do is, watch this. He is now six, which just means he is half of the parent row, the parent container column sorry. And watch this, if I drag it up to 12, click on you, drag him out. Can you see, he's 12, so it’s not the full grid, but its full for him. 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 guys six so I spread him out.

So what’s going to happen is enlarged view or desktop view, I'm going to 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 will mean that these two guys will hang out together because they are jammed inside this column okay so they cant kind of split like the other ones did. So you will 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 not point and designing it all in desktop only to 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 through it all at you in one go.

All right so I think ill actually save the centering for another video just to keep it nice and separate so you can’t find it again later. All right so that’s how to nest columns and rows inside other columns and rows. Now if that freaked you out a little bit, and its all a little too hard, don’t worry, not all sites need to have this kind of nested rows inside other rows. So if you are really new to web design and BootStrap you might skip this little bit or grab the project files afterward so you’ve got a working version to see how it works.