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

Three ways to align img in the center of its parent.

1. img is an inline element, text-center aligns inline elements in the center of its container should the container be a block element.

2. mx-auto centers block elements. In order to so, change display of the img from inline to block with d-block class.

3. Use d-flex and justify-content-center on its parent.