CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
cedric
cedric

Reputation: 302

Bootstrap col max height with image

i try to make a row on bootstrap, with 3 images :

image
(source: hostingpics.net)

But i dont know how.. i want to have 2 col on the row, and the second col with image B and image C must have the same size that the first col determined by the size of the image A.

What append when i try to do this is the row take the size of the second col height, based on the size of image B and C.

Image B and C can have random size, non determined.

remark related to an answer :

The row have to be always the size of the first column, even if the real size of the addition of the height of image B and C is bigger, that mean, image B and C must adjust their size to fit the height of the first column, determined by the image A. So, for your test, you should have big picture on the second column (> height of image A).

thanks for your help.

Upvotes: 1

Views: 936

Answers (1)

Alexis
Alexis

Reputation: 64

You can have nested rows. The first row is split into 2 columns. First column contains image A. Second column has two rows inside with a single column, 1 each for image B & image C.

<div class="row">
    <div class="col-xs-6">
        <img src="image-a">
    </div>
    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-12">
                <img src="image-b">
            </div>
            <div class="col-xs-12">
                <img src="image-c">
            </div>
        </div>
    </div>
</div>

See this : http://codepen.io/anon/pen/BLwzZx

Upvotes: 2

Related Questions