CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Xubayer pantho
Xubayer pantho

Reputation: 329

How to place two image side by side into a div using bootstrap3?

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.

Upvotes: 6

Views: 35485

Answers (2)

benomatis
benomatis

Reputation: 5643

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

Upvotes: 10

batMask
batMask

Reputation: 744

Try this on your css:

.well img{
display: inline-block;
}

Upvotes: 1

Related Questions