Production video - Nesting Bootstrap fluid containers

Hey my name is Dan, in this video is one of the production videos so I'm going to go through and pretty much step and repeat what we did for the nesting and the centering on all these different columns. Go back straight to live view and I'm going to click inside this column and I'm going to insert this row with a column and nest it, its just going to be one like we did before. So I've got, I click inside there, I've got my column which is inside the row which is inside the column which is inside the row. Now what I want to do is, I would like, actually I wanted two columns in this case didn’t I? I've just put one in so if you’ve done that you can either go to undo and redo it and put two columns in which is exactly hat I wanted. But in this case what I'm going to do is I'm going to drag this one down to six and add a new column. Now there’s no difference in doing the columns the first time or doing it afterwards like this. I've got one row with two columns in it. If you're unsure about it, sometimes looking at split view and source code is an easier way to look at things.

You can see I've got a row, beginning and closing, and inside that I've got two columns. And they’re both large, remember, if they start becoming small you're going to have to go in manually and change them because we will be dealing with the desktop view at the moment. Click live, alright and what these needed to be, is this top one here needed to be 12 and it pushes this column underneath. So this guy can be out at 12 as well. It just means that when it does get down to mobile view I remember I can scoot it up and get these guys going side by side exactly how I want it to be when I get to my mobile view. So, 12 and 12, inside of this one, I'm going to insert my image, nest it, I'm going to grab a desktop Dreamweaver exercise files, image and bring in my icon 2. And you’ll notice that I bring it in from my exercise files, and it ends up copying and pasting it inside my actual site files. And that’s a nice thing that Dreamweaver does for you as you go. So lets compare these two, these are my exercise files on my desktop that you’ve downloaded and they’ve got everything we need.

Over here on my BootStrap website, with all my site files, you see in images, that its only brought in the ones that I've used so far. So there are the books and there’s the two icons that I've just imported. And it will slowly but surely shove them all across. You can save time by just selecting all of these and pasting them all on this side here, there’s no real difference. Either Dreamweaver doing it manually one by one and bringing it across. But just know that we've got duplicates of this now. So if I go into Photoshop and start editing these ones in my exercise files, I need to copy them back across into my actual site because these are duplicates over here. Back into Dreamweaver and while I'm here I'm going to add the class for this one called center. Down here, I'm going to insert paragraph and nest it inside here, we are going to call this one App Dev.

And I'm going to click out of it, have the p selected and go in here and put in text-, you can see the different ones in here, so you get the sense, after a while when you start seeing some of these suggestions, you might get a idea of what some of these other things might be doing. So I know there’s center, there’s other ones called hide info, justify, so you might experiment with some of these as you find them. I know I need center, which is great. So lets do it all again.

What I could do now is I could go through hand save some time by going to the split view. You can see, here’s this column, you can see it changing up here in my live view, that’s that column, that’s that column. And there’s nothing inside of it, this is the gap, where stuff goes inside of it, and there’s nothing in it, so it’s pretty empty. Over here though, this column, so here’s that row, so there’s the row over here, and there’s inside of it, its got another row and another column. So I can grab all of that, so that’s the nested row, in the column with the image inside of it, ready to go. If I copy that and I go into here and I hit paste, so I'm inside this one. There’s another nested row and column, do the same for this guy, paste him inside.

Okay and I just got nice little replicas of each other. I'm going to have to go and do a couple of things, so I need to make sure I go through and change the text and the image. That’s easy enough to do, I select on the image itself, I can click on here and this little where it says source, src, click on that. Or down the bottom here in your properties panel, its up to you, it ends up in the same place. Click browse, desktop, Dreamweaver exercise files, and images; let’s bring in icon 3, great. Make sure you add alt text, now you can either add it down here or you can add it up here. I'm going to add it up here and this one is going to be called photography services. Make sure I add the make responsive, you’ll probably thinking to yourself, you didn’t do it for this one Dan, I know, I forgot. Okay, click responsive. Down here, and this one is going to be called photography. That’s why I like Dreamweaver, its kind of the best of both worlds; you get to do kind of visual stuff up here that help people like me who like to see things as they’re working. And allows me to kind of jump in and get amongst the code when I need to, when it makes sense. This one here, click; this one is going to be icon 4. Gonna add some alt text, and this one is Video Production.

Gonna make sure its responsive, great, down here, I'm gonna adjust this one. And what you might notice as you're playing along with my exercise files and I've done a little sneaky trick, because I want them all to have the same, because I want this text all to line up together, what I've done is in Photoshop, I've made sure these guys are exactly the same height and width. Can you see? This image doesn’t need to be this wide, I've made it extra wide using the canvas in Photoshop, just to make sure they’re all equal so that when they start stacking, they stack all evenly. If they weren’t, this guy would be a little thinner, this guy wouldn’t be as tall as this one here and this guy would be a lot shorter a well. So this would stack and this text would rise up because there’s a bit more space yet and it would all push up and nothing would line up. I’ll show you what I did. I though I would include the dodgy versions just to show you the before and after. So in your exercise files there’s this little sneaky folder here called Odd Sized Icons.

So if I used these exact icons, they got the exact same names. So I'm going to do a little thing, I'm going to replace them over here, and its going to freak out and say are you going to replace them? I'm going to say yes, yes, yes. Okay so I've updated them, actually I've moved them by accident. Lets go back into Dreamweaver, its not going to update automatically, it does eventually but to speed it up, there’s this little refresh button here, can you see? Because they’re all odd sizes, they are all trying to fill the width. So this thing to fill the width, had to get really big. This one to fill the width was a little bit shorter; this one is even shorter again. Can you see the text lines up? So what I did was, and it’s really common when you kind of want to do this stacking of similar shapes, is just to make the physical size in Photoshop match. If you don’t have Photoshop or know it all, there are lots of other image-editing programmes, you're just going to have to go work out and try and work out how to get the documents to be the exact same size.

If you want to though, I've got a video course on how to use Photoshop for web design. Kind of pre cursor to this one if you want to go off and do that. So I'm going to go back and over here, undo what I did. And I’ll dump all of these guys back in. And hopefully now if I hit refresh, they’re all the same size, so I'm going to have less problems.

All right that’s the end of this production video, see you in the next one.