Center an inline element has nothing to do with Bootstrap actually.
Center the image using text-align
An image is an inline element and can be aligned using text-align.
Text will flow around the image, since it is an inline element.
Normally:
<div style="text-align: center;">
<img src="http://placehold.it/200x200" />
</div>
The Bootstrap way:
<div class="text-center">
<img src="http://placehold.it/200x200" />
</div>
Center the image using margin
You can change the display of the image to a block element and use margin to center the block.
Text will be pushed above and under the image since we change the display to block.
<div>
<img src="http://placehold.it/200x200" style="display: block;margin: auto;" />
</div>
The Bootstrap way:
<div>
<img src="http://placehold.it/200x200" class="mx-auto d-block" />
</div>
Full example
.my-text-center {
text-align: center;
}
.my-block-center {
display: block;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="my-text-center">
<img src="http://placehold.it/200x200" />
</div>
<div class="text-center">
<img src="http://placehold.it/200x200" />
</div>
<div>
<img src="http://placehold.it/200x200" class="my-block-center" />
</div>
<div>
<img src="http://placehold.it/200x200" class="mx-auto d-block" />
</div>
