CODEWITHSUNDEEP
htmlcssimagetwitter-bootstraptwitter-bootstrap-3
Edward
Edward

Reputation: 623

Centering images inside Bootstrap gridsystem

I want to center my images inside the Bootstrap grid like this - https://i.sstatic.net/xJiiS.jpg; the image should be centered in the blue box (both on desktop and mobile).

here's my html: 

  <div class="row">        
   <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
     <div class="image img-responsive">         
       <a href="#"><img class="img-responsive " src="http://i.imgur.com/GFZbJZr.jpg" border="0"></a>            
     </div>
    </div>      
   </div> 

   <div class="row">        
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
     <div class="image img-responsive">         
       <a href="#"><img class="img-responsive " src="http://i.imgur.com/pJF2nvM.jpg" border="0"></a>            
     </div>
    </div>      
   </div> 

   <div class="row">        
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
     <div class="image img-responsive">         
       <a href="#"><img class="img-responsive " src="http://i.imgur.com/JYYrpgD.jpg" border="0"></a>            
     </div>
    </div>      
   </div>

Upvotes: 0

Views: 4329

Answers (5)

Carol Skelly
Carol Skelly

Reputation: 362270

Just use the Bootstrap 3 center-block class in your images...

Demo: http://bootply.com/104077

I also simplfied your markup to remove unnecessary nesting..

<div class="row">        
   <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">

       <a href="#"><img class="img-responsive center-block" src="http://i.imgur.com/GFZbJZr.jpg" border="0"></a>            

   </div> 
   <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">

       <a href="#"><img class="img-responsive center-block" src="http://i.imgur.com/pJF2nvM.jpg" border="0"></a>            

   </div> 
   <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">

       <a href="#"><img class="img-responsive center-block" src="http://i.imgur.com/JYYrpgD.jpg" border="0"></a>            

   </div>       
</div>

Upvotes: 7

Dennis Fagan
Dennis Fagan

Reputation: 551

should be just a matter of css

.image a {
display: block;
}
.image a img {
margin 0 auto;
display: block;
}

Upvotes: 1

djedi
djedi

Reputation: 72

Try to add in your css:

div.image {
  text-align: center;
}

Upvotes: 0

Germain
Germain

Reputation: 380

This will do the trick ;)

.image.img-responsive {
    text-align: center; 
}

Upvotes: 0

Rohan
Rohan

Reputation: 3334

Try this.

img {
margin:0 auto;
width:50%
}

Upvotes: 0

Related Questions