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
:
<div class="container"> <div class="row"> <div class="col-4"> <img class="mx-auto d-block" src="..."> </div> </div> </div>
Or leave it as inline-block and wrapped it in a div with .text-center
:
<div class="container"> <div class="row"> <div class="col-4"> <div class="text-center"> <img src="..."> </div> </div> </div> </div>
I made a fiddle showing both ways. They are documented here as well.