Subscribe or Login to watch video

Login or Subscribe to watch video

18 - Nesting Bootstrap containers inside each other


Questions & Comments

Goran Nikolov - 1 year ago

Hey there. I am having trouble doing something similar to the video above.

Here it goes, here is how it should look like and I am able to create as shown on the link, but when I move chrome it does not gets responsive.

http://prntscr.com/edzvi4

Thanks

Goran Nikolov - 1 year ago

In fact, here a quick video. I found it easier to explain and show.

Thanks

https://www.youtube.com/watch?v=tQ8iFKCokAE

Administrator Tayla Coman - 1 year ago

Hi Goran,

First I'd change your columns from col-lg-6 - to col-xs-6. IF this is what you're looking for (You always want the columns to be half and half in that row. The other issue you're going to encounter is because you've got a set height on that container then it doesn't have room to expand. You might want to look at changing this to a min-height. Have a go with these examples and then we'll look at the issue with the background image.

Goran Nikolov - 1 year ago

Alright so this happens now. When I use min-height - image background still does not shrinks as I move the browser.

Regarding the col-lg-6 to col-xs-6, it adds one below the other and that is not what I like to achieve.

Basically what I like to do is everything you see in this photo to appear exactly the same in desctop, tablet, mobile: http://prntscr.com/edzvi4

Administrator Tayla Coman - 1 year ago

Having the two colums sit side-by-side even at mobile view is NOT a good idea. The text will become so small and all of the contents will become so squished and dense that it will be nearly unusable. When you say "it adds one below the other" at what size are you meaning? If you could just zip up your site and host it on dropbox I'll take a quick look and try and diagnose the problem.

Administrator Tayla Coman - 1 year ago

Just looking back at the video now, could you also try removing the heights and widths on each image, Bootstrap won't like trying to make the images responsive while also having set widths and heights, it's sort of a paradox for it.

Goran Nikolov - 1 year ago

Somehow I couldn't reply on your last comment so here it is:

"It adds one below the other" - Take a look here: https://youtu.be/Mw6-nI211MY

And here is the link for you to get the website

https://www.dropbox.com/sh/lxvldiqj1ba6j2m/AAC0vtxpni64H1RCCwdVjWsra?dl=0

Thanks

Goran Nikolov - 1 year ago

Don't have widths and heights set up. Using just padding's and margin's on images inside the columns.

Administrator Tayla Coman - 1 year ago

You're going to have to play with margins to have it all line up nicely but it's pretty simple now.

Goran Nikolov - 1 year ago

hmmm, confusing for now but I'll get it with time.

Best way for now is to create separate pages for all type of devices.

I am doing PPC so having separate pages for mobile, tablets and desctops will be the case for me so I can easily test everything without confusion.

Thanks

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

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.

ALL ACCESS: $12 per Month + Cancel anytime