Subscribe or Login to watch video

Login or Subscribe to watch video

16 - Production video - Adding more Bootstrap columns & rows

Questions & Comments

James Dunn - 1 year ago

Hi Dan

Following along quite the thing. So far my work is a exact mirror reflection of yours it. But what I do not understand is how do you arrive at the figure of 12 when inserting rows and columns. Is this a set standard figure irrespective of how many columns or indeed rows, you have.

Administrator Daniel Scott - 1 year ago

Hey James, the total is always 12. If you want 2 equal columns. You need 6 and 6. If you want 4 equal columns you need 3, 3, 3 and 3. 12 is always your total. If you want one column. You just need .col-lg-12. So one spans 12 of the available spaces. Does that make sense?

James Dunn - 1 year ago

Thanks Dan. That is what I thought. Cheers for the clarification

Blake Jett - 1 month ago

Hi Dan,

What if I am wanting to have a container side by side? Say for example, on the left side of the screen I want a contact form, and on the right, I want social media icons.

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hi my name is Dan, in this video we are going to add all the extra rows and columns to the other bands. So I'm going to click inside my services band and I'm going to click grid and row. I'm going to nest it inside here and this one if you look at the template it has, if I turn the guides off, one two three four. You can also see there’s these bits of text underneath but we are going to leave that little bit later on because we are going to look at something called nesting. Well nesting inside nesting but we will do that later on. So at the moment lets just do a nest of four columns and there’s one two three four, perfect. I'm going to come down here, now make sure when you click inside; remember it’s a large three. Three three three which makes 12. Inside this one, lets check out our Photoshop document, it;s going to be the same.


It’s going to have four columns, so we will just make sure, click inside portfolio, insert grid row and column. I'm going to nest it inside of it and it’s going to be four. Click enter, and we are going to do the same thing; we are going to deal with all the text and images inside of it a little bit later on when we deal with images. And the last bit is the footer, so I'm going to click on the footer and I'm going to go row and this one here is, let’s have a look, its actually just one row and one column. And I’m going to nest it inside and it’s just going to be one column and just to double check, click inside and you can see it is a column of 12 and it is one row, awesome. Now lets put the text inside our footer. It’s on our text here, and I select him. Now I click inside and I go insert paragraph and I nest it inside, select the text and then I paste it. Now file, save all and that is all the rows and columns we are going to need for this particular site. All right now lets move on to the next video.

ALL ACCESS: $12 per Month + Cancel anytime