How to put two images side by side in a div using bootstrap3?

Question

I want to place two images side by side in a div, where both images are in the center of the div. I am using bootstrap 3. Help plz

here is my markup:

<div class="well text-center"> <span>Sister Properties:</span> <a href="#"><img src="img/innlogo.png" class="img-responsive" alt="inn_logo" /></a> <a href="#" ><img src="img/cclogo.png" class="img-responsive" alt="ccs_logo" /></a> </div> 

I cannot do this using a row-column row div, but I want to do this using a “good” div.

Answer 1

Your img-responsive responsive class gives your display:block images, which prevents them from centering; try deleting it. Additionally, use the Bootstrap grid system to place them side by side. You can read more about this here: http://getbootstrap.com/css/#grid .

Here is how you could do it:

 <div class="well text-center"> <span>Sister Properties:</span> <div class="col-md-6"> <a href="#"><img src="img/innlogo.png" alt="inn_logo" /></a> </div> <div class="col-md-6"> <a href="#" ><img src="img/cclogo.png" alt="ccs_logo" /></a> </div> </div> 

You can play here: http://www.bootply.com/YSlrhJHBls

EDIT . For the top text center to add 12 wide col . To keep the images inside the well, wrap them inside a div with the row class as follows:

 <div class="well text-center"> <div class="col-md-12">Sister Properties:</div> <div class="row"> <div class="col-md-6"> <a href="#"><img src="http://lorempixel.com/400/200/" alt="inn_logo"></a> </div> <div class="col-md-6"> <a href="#"><img src="http://lorempixel.com/g/400/200/" alt="ccs_logo"></a> </div> </div> </div> 

Here is the updated bootply: http://www.bootply.com/TuXAsykG7e

Answer 2

Try this on your css:

 .well img{ display: inline-block; }