How can I center an image in Bootstrap?

Question

I am struggling to center an image using only Bootstrap\'s CSS-classes. I already tried several things. One was adding Bootstrap CSS-class mx-auto to the

Answer 1

Image by default is displayed as inline-block, you need to display it as block in order to center it with .mx-auto. This can be done with built-in .d-block:

Or leave it as inline-block and wrapped it in a div with .text-center:

I made a fiddle showing both ways. They are documented here as well.