center-block not working

6 replies
565 views
Translate

Hi,

I am following a Tutorial do customize a Bootstrap site. At a certain point, I try to center a responsive image by using the center-block class, exactly the way it is done in the Tutorial. But it does not work. Follow a print screen of the code, everything seems to be correct, but the image is not centered. Any ideas on what could be the problem?

best

Marcus

This topic is closed to new replies. Start a new post to keep the conversation going.

P

Paul-MCorrect answer

Legend

Here's your reference for more about positioning images in Bootstrap 4: https://getbootstrap.com/docs/4.0/content/images/

It sounds like you are working on a project with Bootstrap 4 but following a tutorial for Bootrap 3.

Paul-M - Community Expert

M

mbastosAuthor

Participant

Ben,

thanks for your answer!

best
Marcus

Translate

P

Paul-MCorrect answer

Legend

Here's your reference for more about positioning images in Bootstrap 4: https://getbootstrap.com/docs/4.0/content/images/

It sounds like you are working on a project with Bootstrap 4 but following a tutorial for Bootrap 3.

Translate

Paul-M - Community Expert

BenPleysier

Community Expert

Assuming that you are using Boottrap 4, the image has to be converted from the default inline-block to a block level element. This is done using the class of d-block.

Secondly, we centre the image by setting the horizontal margins to auto by adding the class of mx-auto.

We now finish up with