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

Hi my name is Dan and in this video we are going to look at centering. We are going to look at centering both images and text. We are going to do this horizontally. So we are going to put in our image, so I'm going to click inside our column, that’s our nested column. And we are going to go to insert image. We are going to nest it inside of it and I'm going to go back to our desktop, find my Dreamweaver exercise files, go to images and I'm going to use icon 1 print. It puts in my image, great.

So there are two things I need to do before I worry about this centering, we looked at it a little bit earlier. If you remember, it was alt text, so we need this for Google and for people that are using screen readers that are visually impaired and tis ones going to be called printing services. Print design icon. And the other thing was that responsive one, we can either click it by adding a class or we can use this little menu here and click make responsive. And it means it will adjust its size to fit with the different browser sizes. So the next thing we are going to do is center it. To do it there is a special class, BootStrap have made it for us.

So whenever you're thinking of creating your own class, especially in the beginning, you are going to have to go back to BootStrap quite regularly to see whether they’ve got a premade one for you. So if I switch out to Google and I go to getbootstrap.com, it’s the homepage remember for BootStrap. I can go to css and I can have a little look down here to see whether, say images, and have any helpful little classes that I can use. There are some helper classes, what I like to do is do a search for the page. So command f and do center. There’s some text centered, 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. When you are new you will 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 can kind of find the elements, do it regular on css but there’s all these like lovely little help 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 potentially wouldn’t work in a really old version of Internet Explorer and have got work arounds to fix it.

So, I've got this one called center block. So if I go back to Dreamweaver and I add a class called dot center block and it’s going to center my mage within its column, lovely. Now for the text down the bottom here I'm going click down the bottom in this column, I'm going to insert paragraph, I'm going to nest it inside there, and there’s my p tag which is my paragraph tag which is just body text. And this one here is going to be capitol print. Now we saw a second ago in BootStrap there is a centering one for that class as well. So I'm going to apply it to it, called dot center, I know what it was called, text hyphen center.

So we've applied a couple of BootStrap classes that are premade 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 dot css is staying pretty damn tidy. There’s not too much on here, it’s nothing crazy with all these different classes that you’ve had to make. So I've been getting you to add the classes manually so you can see here we added text, text-center, 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 will get a little bit better at working with it. Now there are some more, some easy ones, if I undo my text center one here, see there’s a little attribute menus, this little three slider thing.

You can see here, I've got some bits in here, and can you see under BootStrap? Its got that one, its got that particular one, its got a line, center and if I click on the image, and if I use that little drop down one. There is a BootStrap and there is no BootStrap centered for the image yet. But I imagine as the version grows up and gets more features, it’ll have those types of things in there.