0

I wanted to create an image grid with one full image on the left and 4 thumbnail images on right of the big image. Something like what I've done here:

https://codepen.io/ashwindkini/pen/qabRok

<div class="container">
<div class="row">   
        <div class="col-md-6">
            <img src="https://placehold.it/450x450" alt="" />
        </div>
        <div class="row">
            <div class="col-md-3">
                <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
            </div>
            <div class="col-md-3">
                <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
            </div>
            <div class="col-md-3">
                <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
            </div>
            <div class="col-md-3">
                <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
            </div>
        </div>

How do I prevent the second set of images (thumbnails) from increasing the size of row?

Improve this question
4
  • Your question is worded a little vague, but I think you are asking how to limit the height of the row of the second set of images? If that's the case, try setting a max-height via css. You might also want to change the second row and all the col-md-3s, into col-md-6 Commented Sep 13, 2016 at 6:34
  • I wouldn't nest a row as a direct descendant of another row. Add a column and then place the row inside it. You could set explicit heights, use flex/table or use some js to get the two to be of equal height. I don't think there is a native way as of now unless you're using Bootstrap 4 with flexbox. Commented Sep 13, 2016 at 6:48
  • Thanks guys. I've nested the row under a column now. The problem still persists as is expected. Well, I guess I would try to create a hack around this problem now. Commented Sep 13, 2016 at 7:46
  • Will try the solution with B4, @AnkithAmtange. But that's still in alpha right? Let us see how that goes.. Commented Sep 13, 2016 at 7:46

2 Answers 2

Reset to default
1

Are you able to make the larger image actually a larger image so that it scales responsively in comparison with the smaller "thumbnails"?

It would help to remove padding from the columns so that the width of the image (forced by column padding) doesn't limit the height of the image.

Everything can go in a single row..

<div class="container">
    <div class="row">
        <div class="img col-sm-6 col-md-6">
            <img src="//placehold.it/600/666" class="center-block img-responsive" alt="big image">
        </div>
        <div class="img col-xs-6 col-sm-6 col-md-3">
            <img src="//placehold.it/450/EEE" class="img-responsive" >
        </div>
        <div class="img col-xs-6 col-sm-6 col-md-3">
            <img src="//placehold.it/450" class="img-responsive" >
        </div>
        <div class="img col-xs-6 col-sm-6 col-md-3">
            <img src="//placehold.it/450" class="img-responsive" >
        </div>
        <div class="img col-xs-6 col-sm-6 col-md-3">
            <img src="//placehold.it/450/444" class="img-responsive" >
        </div>
    </div>
</div>

http://www.codeply.com/go/y9nZTlXSWT

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The "row" element should not be a direct child of another row element. You should put it as a child of another col-md-6.

Here's the example:

https://codepen.io/anon/pen/dpGvOJ

<div class="container">
    <div class="row">   
        <div class="col-md-6">
            <img src="https://placehold.it/450x450" alt="" />
        </div>

        <div class="col-md-6">
            <div class="row">
                <div class="col-md-3">
                    <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
                </div>
                <div class="col-md-3">
                    <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
                </div>
                <div class="col-md-3">
                    <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
                </div>
                <div class="col-md-3">
                    <img src="https://placehold.it/450x450" alt="" class="img-responsive" />
                </div>
            </div>      
        </div> 
    </div>
</div>
Improve this answer

2 Comments

Got your point about the row placement. But I don't want the 4 images to show in the same row horizontally. They need to show up more like a 2 by 2 matrix.
Then you should use col-md-6 in place of col-md-3 and to make them te same height you may use max-height: 225px; but I'm not a huge fan of this solution, here's the snippet: codepen.io/anon/pen/qabmXg

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.