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.