How to add Bootstrap columns & rows in Dreamweaver

Hi, my name is Dan. In this video we're gonna look at adding rows and columns. Now what we need  to do now is we've added our containers fluid. Okay? Those are the ones that stretch the edges. Now we need to add our internal containers  and split those containers up into little  boxes we can use for text.

So in terms of our Photoshop mockup. And we want to bring in a container that fits inside  of here, okay? And allows us to put this content, uh, the title here  and this text inside of it. Okay? So let's do that. Let's make sure that we've got our top box selected.

Okay, band hero. Let's go to insert,  and let's put this one called container. Now this is one. Have a guess what, which one should it be Before,  after Rap or Nest? If you said Nest, you're correct. Okay, so I've got, um,  this hero band selected, and I want a nest.

It means I wanna put it inside. Okay. And you'll see I've got a nice little fix width inside  of here that is inside my, um, hero band. Great. So now what goes inside this? I could start sticking content  in here, but you're not meant to.

Containers just meant to be this wrapper around the outside. It's meant to hold these things, okay? Which is a row and a column. So you need a row and a column. Um, so in our case, we're just gonna need one. Okay?

We're gonna have this, uh, one row and one column. So a column goes inside of a row. Let me have a little demo, actually make  that a little bit more clearer. So I'm gonna insert, uh,  I'm gonna make sure this container's selected. I'm gonna go, uh, grid, row and column. And it's gonna say again, which one do we wanna do?

I wanna put it inside the container. So I picked the Nest, okay? And I could have three columns. If I clicked, okay, I'd have, oh, select that moment. I'm gonna click Nest. Okay?

I'd have a row, which is the kind of outside,  and then inside of that there is three columns. Okay? But I'm gonna go to undo, edit, undo. 'cause all I want is one row, one column. So I'm gonna click that click nest,  and I'm just gonna click one. It adds the row 'cause it needs it by itself.

And we will add the column based on what you type in here. Great. So, um, great. I've got one row with a container inside of it. Now I can start putting my text in. Now if you've got to here,  we've done something really wrong.

Okay? Um, and it's gonna cause us no problems at the moment,  but a lot problems later on. Not a lot of problems, just a lot of time wasted. Uh, later on we were working on our kind  of say our tablet view and our mobile view. Um, the reason is, is if I select in here,  you can see I've selected the column. There it is there inside the row, which is  inside my container, which is inside the fluid band.

Okay? So they're all nested inside each other. But the thing that's happened that um, we need to be careful  of is, can you see this column here? It has a class apply called sm, which just means small. Okay? Now small refers to uh, a mobile phone  and we're gonna use that later on.

So what it's done is it, it picks small  because can you see this little slider here? It's  Halfway through. This is  what it considers small. This is what it calls extra small  and way out here where I can't see  because of my screen size are medium and large  and I need to be dealing with large for my desktop. So, um, Dreamweaver, by default,  if you've got a small screen, you're gonna have problems. Now all it is, if you've built this site, uh,  for desktop view and later on you try and go through and try  and make it, um, mobile, it means you're gonna have to go  through and change everything, do a find  and change with from everything that's currently SM  to lg, which is its large.

So what we wanna do is we're gonna get it undo. We're okay. So we've got rid  of just a container now with no rows and columns. Now to get Dreamweaver to play ball, hey, we need  to tell it we're working on the desktop view. Can you see here, I wanna say set to at the moment  because of how wide my screen is,  but if I say medium, it's gonna kind of jump out. You can see it kind of goes past the screen there.

That's, it's almost it. So I'm gonna click on large devices  and it just means when I click and add a row in a column  and I say it's gonna be nested  and it's gonna be one row, one column, you'll notice  that it uses the class by click inside of small. Now, to get round this, what we need to do is we need  to trick Dreamweaver into thinking it's a bigger size. Now you'd think you just go down here and pick large devices  and it will display that. But when we add it, okay, so if I gotta undo, I click  inside here and I say add, even though I've said it  to be large, okay, nice and big and I go to add a grid  and a row, nest it, and one it still comes up as small. Okay?

So hopefully this is a bug that gets worked out. So test yours. But what I do is I click inside. Um, and what I'm gonna do is I'm gonna zoom out. Okay? So I hold control minus or command minus, okay?

And I just make sure that this is somewhere over here. Now, another way to zoom is under view  and you can use the long way, um, and uh, magnification. And you can zoom in and out  or you can see here's a few shortcuts  or you can jump to 50%. So the way is to trick Dreamweaver. What we need to do is we need to zoom out a little bit so  that we can see the rest of these media queries. So at the moment, that's our mobile view, okay?

And that's the what's called excess. And there's another one called small. We wanna get all the way out there to the desktop view. Now we're gonna talk about media queries, uh,  in more detail later on. But when you're building your desktop view with me now,  make sure that you can see the desktop view. So I'm gonna hold, uh, command minus  and click it once on a Mac  and that will zoom out a little bit.

If you're on a pc, hold CTRL minus and zoom out. And then obviously control um, plus  or command plus will zoom in. So minus and plus zooming in and out. So I can now see this desktop view. Great. It just means that when I'm viewing in this area, uh,  it's great, I can see my whole site.

But it also means that when I click inside here  and I add my row on my grid and I click nest, uh,  and I type in one hopefully. Now when I click inside, can you see it's  applied that large class. Now you could go through in Cove view and go  and change it every time you hit small go  and change it. There's no big  Problem with that. You could wait to the end  of when you're doing your desktop view and go  and do a fine change of them all and one big go. It's up to you.

I like to just zoom out  and make sure we're putting in this, uh, algae,  which is our large one to start with. 'cause we're working on desktop. So I've got one row you can  see in there and inside of my column and,  and that's where my contents is gonna go. Now I'm just gonna add a bit of text  to the inside of this one here. We're gonna do type in its own little video later on. So we're just gonna add some placeholder text.

Now, um, I can click inside here and I can type something,  but it's actually quite tough. And what I should be able to do now is go into insert  and insert a paragraph, okay? Which is a bit of text that goes  inside, but it's not working. It's all grayed out. If this ever happens to you, um,  you just gotta make sure that you're on your source code  version, okay? Not on your main CSS or any of these other ones.

If you're a source code and I click inside of here,  now I can go to insert and go to paragraph again. I think this is a bug with Dreamweaver. Hopefully it gets fixed. Um,  but so you know, um, I can click the paragraph. I'm gonna nest it 'cause I want inside that column  and it's just added a bit of default text in here. What text am I gonna add?

I'll just add the real placeholder text there,  which is let's make this awesome. We're gonna go through and style that properly later on. But let's just leave in here so we know that that's, uh,  this bit of uh, box here. Actually let's add all of that text so we can edit it  by either double clicking it up here, okay? And uh, you can see I can get it, you know,  you're editing text when it goes orange, okay? And everything kind of else fades out in the background  or I can edit it down here in Cove View.

I'm gonna edit in live view, okay? We're gonna stick to kind of more of  a visual way of doing things. So I'm gonna double click in here  and actually that's meant to be caps. Let's make things awesome. Uh, I'm gonna zoom in. So member command plus or control plus.

Now I want to add some text after this. I'm gonna put in the fake text that goes in underneath. Can you see it's just Lauren Opim, uh, mixed up kind  of Latin words just to  placeholder until I get the copy written. And you'll find it in your exercise files. You can go to text, open it up  and there should be a bunch of text you can copy and paste. I'm gonna paste that into Dream Move.

So I'm gonna double click. So it goes orange, hit enter  and paste and it's gonna put my text in here. We're not gonna style it for the moment, okay? It's just gonna hold there. We're gonna do some styling  later on when we look at fonts. Next thing is let's add the container to this who we are.

And if you look at Photoshop, there is a container  around the outside, but there's also two columns, okay? One for my image and one for this text on the right here. So let's add it. Let's click inside our um,  the band for who we are. And we're gonna go insert a container. We're gonna put it to be nesting inside of it.

And then we're gonna add our grid and our row. And this one's gonna be nested inside,  but I'd like it to be two columns. Okay? So we've got this outer row,  but inside of there we see here I've got two columns. You can see um, two columns. And they've done it by dividing these columns.

Remember we talked about our grid earlier on? So there's an underlying 12 column grid. So to split it into half, that is six  and six. Well, you'll also  Notice that I did not zoom out. So it's done a small six, which is bad. Let's go to undo.

Okay? So edit, undo, edit, undo until it goes away. Sometimes I need to click out, edit, undo. There it's gone. Okay? And I'm gonna zoom out a little bit.

So I'm back to my large view. So remember this edge here I can see the edge  of my large desktop. Click my container, insert a grid in a row, sit inside  and put two columns. Great. And hopefully now you'll see I've got en  large that says six. And this side it says six.

So it's in two halves. Now in terms of the layout, it's slightly different. I want to kind of do a smaller box on this side  so it's not 50 50. So I'm just gonna guess that for the moment. I'm gonna say you are about four. You can see when I drag this right hand side here,  it actually changes the class name.

Now if you were doing this in full code view, you could go  through and just change it from six to four,  do the same thing, but I guess dream of perk is that you get  to kind of do it in a more tactile, visual,  wizzy wig type of way. So there he goes, he's four  and you can see this one, it's still six  and there's a bit of a hole left over the side there. So what I wanna do is actually I wanna make this, um,  I want there to be a bit of a buffer between these two. So maybe a column spacing between these two. Um, to do this, if I do it to this right hand side here,  if I drag it in, you'll see that it'll adjust  how many columns it spans on the opposite side. This one here doesn't do what you think it might.

You think if I drag this side, it's gonna do the same,  but it doesn't watch what happens if I drag it this way. So it's six at the moment. And if I drag this out,  you see it says it's still sick,  but it's actually added this extra class called offset  one for the large document. Okay? So in my large view it's gonna offset this one. Can you see this kind of like hazy line here?

Um, it's a little hard on this smaller view,  but you can see there's a little hazy light means there's  gonna be this but offset or this buffering on this side. So I want this little um, buffering there  and I wanna drag him. So he is filling that gap there. You don't have to fill that gap,  but I've got four on the side, I've got a buffer of one  and I've got my seven  and that will make up my complete grid of 12. Now the next bit, I don't want you to follow along,  I'm just, and there's a example. Say you do have just one uh, container fluid around the  outside and you wanna start dividing this internal uh,  container up into lots of different parts.

Um, so there are columns and rows. Now at the moment we've got one row  and you can divide that up into columns. So if we need other rows underneath, you can do it by Um,  what you need to do is have the row selected. So if you've got a column selected like this, you need  to go back up and click here in your parent row, okay? And you get a nice little option over here  that says add new row, okay? Or I could duplicate the one that I've currently got,  but if I go to add new row, you'll see it here.

It adds a new row with our two columns in there by default. And I could go through and style this, I could decide, okay,  it's going to be, this next row is gonna be a same. Okay? So it's gonna be, it's gonna be four. This one here is gonna have an offset of one  and this one here is gonna have seven. Now let's say the last  Part of this particular website is four columns.

So what I'm gonna do is click the parent row,  I'm gonna say add a new row. And in here I'm gonna say I'm gonna make this one. So if I want four, I need to go three  I three. And can you see I've got a big hole over here now. So I've got two columns, but they're only three and three. So I need another two.

So I can say I've got the column  selected and I can say duplicate  and then I can duplicate it again. And I've got this very thin, okay,  which I can start filling with content. But I've got a website with these two,  another row with another two. And then this last row with four columns. I'm gonna undo those. I just wanted to show you an example  of how you'd go off and start building a site if you only  had one fluid container.

But we've got a few different ones. So this is the sky done. Now we're gonna add some content in there,  just really basic stuff so that we can just  so it fills it out a little bit, let's copy  and paste the text that goes into here. So I'm gonna go to my text document  and there it is, who we are. Oh, clicked all of this and pasted it in there. So remember, if I click inside of it  and this is grayed out, okay, it isn't at the moment,  it's probably means you've got your CSS selected.

So make sure we're on source code,  which is the H TM L, okay? And let's go to insert paragraph. And inside there I wanna nest it inside. Okay? And I'm gonna select it all. Okay, it goes orange, I'm gonna paste that in there  and put a return in after this one.

Click out and I've got some basic text to work with. Now what I wanna do is add it to this image here. Now I've got the trouble  of if I wanna zoom in, now watch this. If I zoom in, okay, it snaps  and it puts them above each other. 'cause I'm looking at it now at a smaller view,  okay, a mobile view. So I'm gonna have to zoom out a little again.

And you've got two options. Now if you're working on a  really tiny screen, like I am at the moment doing this  tutorial, um, you have to work out at this view  or you can close, can you see this little double arrow here? You can close that and then zoom back  in and see what you get to. You can see my one's still not big enough to get out  to the large view. So I'm gonna always have to zoom out when I'm working in  Dreamweaver on this laptop at this resolution. Now I normally work, I love my laptop,  but I normally plug it into a bigger monitor so  that it helps me work on these larger sizes.

If you're working on a, I don't know, MacBook Air,  like an 11 inch, it's gonna be tough work. You might wanna invest in a screen. Doesn't have to be expensive. Screen just has to be white, okay? So I'm gonna pop that back out so that you can follow along  with me and I'm just gonna have  to be zoomed out a little bit and just look at  everything a little bit tiny. But don't worry, we're gonna look at previewing consistently  in a second, which means, um,  we can do stuff from Dreamweaver  and see what it's gonna look like in the browser.

So, um, you can see here I've got my text. I want to add in here that little image. So I've got the image in. We're gonna do images in more  detail later on in the tutorial,  but let's just do a basic one. So I'm gonna select on it, I'm gonna get an insert. I'm gonna go to image  and I'm gonna nest it  inside my column that I've got selected.

And I want to go to my images. So I want you to go to your exercise files. Mine on my desktop, Dreamweaver exercise files. I've got images. And you'll see in here I've got one  called graphic old books. That's what's gonna go in there.

Let's click open and voila it fits in here. Okay, so we've got our first little image. Now we're gonna do images in more detail, remember later on. But just while we're here,  there's two things you need to do. Whenever you put an image in, we're gonna do  the alt text, okay? And the alt text is to do with what Google sees.

'cause Google can see your graphic, okay? It can see the file name of it. It can see graphic old book.jp  and that's reasonably descriptive,  but most people have images called, I don't know, ig, uh,  or IMG 4 4 7 2. And that's not gonna help Google. What Google wants to see  and what it wants for its users is a description. And this is what here is the old text is for.

So I'm gonna add old text of, uh, old  books in the library  and what that's used for if I click enter now, um,  if I click on the object here and I go to my code view  and make sure I'm in source, you'll see  that there's my image, okay? There's a linking to this image here  and here's my lovely old text, okay? And that is used by Google  'cause Google can't see the image, it's a computer  that goes wrong, crawls the code,  but doesn't actually see this image like we can. And what it wants to do is a, it wants to know, um,  what it is so it can index it  and know what your page is about. But what it really wants it for is for people that are  visually impaired or blind, okay? That they have software on their computers  that read them websites.

So when the website gets read out to somebody,  it's not just, here is an image called IMG 1 1 4 7. It's actually describing the image using your alt text. So it's really important to make sure you have this on all  images because Google likes it as part of its rankings  and you wanna make sure you describe it route. Well the easiest way to do is imagine you were describing it  to somebody who can't see it. Alright, let's go back to live view. Um, so al text needs to go on  and the one other thing that needs to do when you're dealing  with responsive bootstrap sites, you need to select on it.

And I'm gonna zoom in a little bit just so  that you can see it on the, um, screen. Um, can you see this little sandwich here? Okay, this little three stripe lines. If I click on that, okay, you need to add this one  that says make image responsive. Okay? What it does is without it, see if I zoom out,  can you see it doesn't actually fit in this box?

Can you's too wide and he's the right height. This box pushes out,  but actually it doesn't fit within our four columns, okay? He's a bit stretched out the side. So what we need to say is click on the image,  click on this little stripe line,  click make responsive and watch it. Can you see it actually fits in with the column size,  which means it's gonna push his boundaries out  and it's gonna cause loads of problems when you're trying  to style this thing down for mobile  or even our desktop there, it didn't fit. Okay?

So make sure, click on this little option here  that says make image responsive. And uh, if you  Don't have that option or you got an older version  of Photoshop and all you really need  to do is add the class called, I'm gonna zoom in. It's called image responsive. So say we don't use this option here, let's turn it off. Can you see it's just adding that class. You can manually type it in if you want.

So clone that off, add it by going img  responsive does the same job. Okay, either which way you wanna work, zoom out again  and now it will stretch  and contract for the different sizes later on. So make sure alt text and image responsive. Alright? And that's an introduction to our rows and columns. We haven't styled any of the text,  we're gonna do that later on.

But remember, you've always got  to have at least a container. Doesn't matter if it's a, a fluid one  or just a regular fixed width container. Then you need a row. And then inside  that is always a column, even if there's no splits into the  columns, you should have this column here. 'cause it's column that we apply that how many thing, uh,  how many grids it spans. You can see at the moment it's spanning the whole 12.

And this one here, seven. This one here, four. All right, that's it. Let's go into a production video  where we add all the rows  and columns to all the other pages.