i want to place two image side by side into a div where both images are center into parent div. i am using bootstrap 3. plz help
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 cant do this using "row-column" div but i want to do it using "well" div.
Approach: First, create the <div> tag as mentioned in the previous example and insert multiple images inside a common <div> tag so that all the images have a separate <div> tag and a class name.
Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.
Your img-responsive
responsive class gives your images a display:block
that prevents them from centering; try removing it. Also, in order for them to be placed side by side make use of Bootstrap's grid system. You can read more about it here: http://getbootstrap.com/css/#grid.
Here is how you could do this:
<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 with it here: http://www.bootply.com/YSlrhJHBls
EDIT: To make the top text center add a 12 wide col
. To ensure the images are inside the well too, wrap them inside a div
with class row
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
Try this on your css:
.well img{
display: inline-block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With