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

Since the img is an inline element, Just use text-center on it's container. Using mx-auto will center the container (column) too.

By default, images are display:inline. If you only want the center the image (and not the other column content), make the image display:block using the d-block class, and then mx-auto will work.

Demo: http://codeply.com/go/iakGGLdB8s