2,939 views

The default "img-responsive" class horizontal alignment of bootstrap 3 is left aligned. If you would like to center an image on your layout with that class, specially for your mobile users, just add the "center-block" class along with "img-responsive" class, and it will be nicely centered horizontally.

By Rnel, on April 25, 2015, under Bootstrap Tutorials

Any custom css styles on the image tag, or on any container holding it is not needed, the "center-block" class will easily handle it for you. Below is the sample code, tested in version 3.3.4 to be exact

 
<img class="img-responsive center-block" src="images/cat.jpg" />
 

This will become...

 

Like this...