Subscribe or Login to watch video

Login or Subscribe to watch video

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


Questions & Comments

Roger Coull - 10 months ago

Hi Dan, I just wanted to add my thanks to the many people appreciating your courses. One of the things I like the most is your flow and speed. If there is something I don't quite understand I'd rather just rewind and watch again than have the whole course slower. Thanks again!

Administrator Tayla Coman - 10 months ago

Hi Roger, thanks so much for the kind words, I'll make sure Dan see's this comment. Another thing you can do if you want to slow it down is select the options in the video player and change the speed to be lower. Hopefully that helps some other people if they feel like it needs to be slower. Thanks again for the kind words.

Allen Sant - 8 months ago

Why would you not put the Crid Row inside a container, as you did in the previous video?

Yaso - 8 months ago

Hi Tayla,
What is the new center-block for responsive image in Bootstrap 4? I think and now I started to understand that they change the code with every single version of Bootstrap!

Yaso - 8 months ago

I found it Tayla,
it is:
mx-xl-auto
d-block

Thanks

Administrator Tayla Coman - 8 months ago

Good work Yaso

JEROME BALDSING - 7 months ago

This seems to not display in dreamweaver but upon previewing in browser.

Andy - 7 months ago

Hi guys,

I'm having issues with multiple images within the same column. Say, I have 1 row with 3 columns (lg-4's). I want to add 3 small images to the centre column (a Twitter logo, an image spacer and a Facebook logo). If I try to .mx-auto and .d-block each of those images, to centre them to the middle column, it completely throws out the alignment and they actually begin to stack on to one another.


Is there any way to centre an entire column? If not, is there any easier way of doing what I'm trying to do? (having two small 50x50 rollover social media logos, centre of the page with around 50px space between them (which is why I was trying to us an image spacer...but that little cheat isn't working with Bootstrap lol).


Thanks guys

Matt - 3 months ago

Hey,
I can't seem to center my image. I've followed the same steps but it comes up with .img-fluid instead of .img-responsive. Tried using .center-block but it won't center. I'm assuming it may be because it says fluid instead of responsive. Any ideas please?

LIONBERGER ROBERT ERIK - 2 months ago

To center images using the current Bootstrap 4 -->
class="img-fluid mx-auto d-block"

;)

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

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.

ALL ACCESS: $12 per Month + Cancel anytime