Centering the image in Bootstrap

Update 2018

Bootstrap 2.x

You could create a new CSS class such as:

.img-center {margin:0 auto;}

And then, add this to each IMG:

 <img src="https://stackoverflow.com/questions/19219951/images/2.png" class="img-responsive img-center">

OR, just override the .img-responsive if you’re going to center all images..

 .img-responsive {margin:0 auto;}

Demo: http://bootply.com/86123

Bootstrap 3.x

EDIT – With the release of Bootstrap 3.0.1, the center-block class can now be used without any additional CSS..

 <img src="https://stackoverflow.com/questions/19219951/images/2.png" class="img-responsive center-block">

---

Bootstrap 4

In Bootstrap 4, the mx-auto class (auto x-axis margins) can be used to center images that are display:block. However, img is display:inline by default so text-center can be used on the parent.

<div class="container">
    <div class="row">
        <div class="col-12">
            <img class="mx-auto d-block" src="https://placehold.it/200">  
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <img src="https://placehold.it/200">  
        </div>
    </div>
</div>

Bootsrap 4 – center image demo