How to center images in Dreamweaver using Bootstrap (.center-blox)

Hi, my name is Dan and in this video  we're gonna look at centering. We'll look at centering both, uh, images and uh, text. Um, we're gonna do this, uh, horizontally. So, uh, let's put on our image. So I'm gonna click inside our column. Okay.

And that's our nested column. Okay? Um, and we're gonna go to insert image. I'll gonna nest it inside of it  and I'm gonna go back to my desktop,  find my Dreamweaver exercise files, go to images,  and I'm gonna use icon one Print. Click open. Okay.

It puts in my image. Great. So there's two things I need to do  before I worry about entering. Okay? We looked at it a little earlier. Um, if you remember it was alt text.

Okay? So we need this for Google  and for people that are using screen readers  that are visually impaired. And this one's gonna be called, um, what was this one? This one's gonna be Printing Services  Print Design Icon. Okay. And then other thing was remember that responsive one?

We can either click it by adding a class  or we can hit this little um, menu here  and click Make Responsive and great. It means it will adjust its size to fit  with the different browser sizes. So, um, next thing we're gonna do is center it to do it. There's a special class, okay, bootstrap have made for us. So whenever you're thinking of creating your own class,  especially at the beginning, you're gonna have to go back  to Bootstrap quite regularly  to see whether they've got a pre-made one for you. Okay?

Now, so if I switch out to Google  and I go to get bootstrap.com, this's the homepage, remember  for um, bootstrap I can go to CSS  and I can have a little look um, down here  to see whether say images. Okay. Have any, um, helpful little classes that I can use. There's some helper classes. Um, what I like to do is do a search for the page so  I can command F and do center. Okay, there's some texts centered.

Okay, if I go down responsive images,  there's a centered image  and you can see that there's this one called center block. Now I know that because I've had a search for it before  and used it and when you're new you'll have  to keep going back to Bootstrap. Just to get yourself a little bit more aware of  what classes are out there. You can do it in CSS, there's no problem with that. You could kind of find the elements,  do it in regular odd CSS,  but there's all these like lovely little helper classes  that Bootstrap have already made. And the nice thing about them is often say like this  responsive one, there's lots of protective code for  say It potentially wouldn't work in a really old  version of Internet Explorer.

And I've got workarounds to fix it. So I want this one called Center Block. Now if I go back to Dreamweaver  and I add a class called.center block, okay. And it's gonna center my image within its column. Lovely. Now for the text down the bottom here,  I'm gonna click down the bottom In this column I'm gonna go  to insert paragraph.

Okay, I'm gonna nest it inside there. And there's my PP tag, okay, which is my paragraph tag,  Which is just body text. And this one here is gonna be Capital Print. Great. Then click out. Now we saw a second ago in Bootstrap,  there is a centering class for that one as well.

So I'm gonna apply it to it called Center. I know it was called Text Center. Lovely. Great. So we've applied a couple of bootstrap classes  that are pre-made for us without  having to create our own one. And what that just means is  that we're relying on Bootstrap a Great  that they've already done it worked out all the bugs,  but also my main do CSS is staying pretty damn tidy.

Okay? There's not too much on here, it's nothing crazy  with all these different classes you've had to make. So I've been getting you to add the classes manually. So you can see here we added text, uh, TechCenter, just so  that you get used to using Bootstrap  and kind of figuring out what the classes are called. There are some helpers though in Dreamweaver  and I guess as Dreamweaver matures in its relationship  with Bootstrap, it'll get a little bit  better working with it. Now there are some awesome easy ones.

If I undo, uh, my tech center one here,  so there's a little attributes menu,  this little three slider thing you can see here. I've got some bits in here. You can see on a bootstrap. It's got that one, it's got that particular one,  it's got a line center. Okay. And if I click on the image  and I use that little dropdown one, there is a bootstrap  and there is no, uh, bootstraps centered for the image yet.

But I imagine as the vision grows up  and gets more features,  it'll have those types of things in there. Great. So that's  how you center an image using the center block  and to do it with text using text center. Great, see you in the next video.