Centering the image in Bootstrap

Question

I m using bootstrap 3.0 to creating a website. I am new to bootstrap. what i want, i want image in center of div when browser size is extra small i have this code.

<div class="col-lg-10 ccol-lg-offset-1 col-md-12 col-sm-12 ">     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">         <img src="images/2.png" class="img-responsive" />         <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>     </div>     <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">         <img src="images/2.png" class="img-responsive" />         <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>     </div>     <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">         <img src="images/2.png" class="img-responsive" />         <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>     </div>     <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">         <img src="images/2.png" class="img-responsive" />         <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>     </div>     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">         <img src="images/2.png" class="img-responsive" />         <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>     </div>     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">         <img src="images/2.png" class="img-responsive" />         <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>     </div> 

Answer 1

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="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="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="//placehold.it/200">           </div>     </div>     <div class="row">         <div class="col-12 text-center">             <img src="//placehold.it/200">           </div>     </div> </div> 

Bootsrap 4 - center image demo

Answer 2

.img-responsive {      margin: 0 auto;  } 

you can write like above code in your document so no need to add one another class in image tag.