Boostrap - Thumbnails that react and fit when window resized

Question

I am trying to have my thumbnails move and fit the available space when the window is resized. The thumbnails contain different size images and the first row seems fine. However the first thumbnail of the second row seems to start where the bottom of the longest image of the first row is.

What I would like it to do is the first thumbnail or the second row would just be right under the first thumb of the top row.

All the images are the same width.

An image speaks a thousand words: https://snag.gy/JqgAIl.jpg

Thanks all!

<div className="col-lg-8">
  <div className="row">

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="87.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="26.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="25.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="34.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="99.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="12.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

  </div>
</div>

Answer 1

Try using jquery Masonary plugin, its much better.

$('.row').masonry({
  // options
  itemSelector: '.masonaryclass',
  columnWidth: 200
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>
<div class="col-lg-8">
  <div class="row">

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x150" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x100" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x155" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x250" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x50" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x120" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

  </div>
</div>

Answer 2

You can solve this with CSS by clearing the float from your columns at the appropriate breakpoint. Since you're thumbnail layout is only changing at col-md-* (specifically col-md-3), you can do this at 992px using the nth-child selector applied to 4th column.

Thus the expression 4n+1 will match the first, fifth, ninth, thirteenth, seventeenth, twenty-first, and so on, elements if they exist

from Sitepoint: Understanding :nth-child Pseudo-class Expressions and see nth-child tester for more info.

Here's a Working Example of what it your layout appears to be (I know you're using ReactJS but the same applies).

Caution: Make sure to use a unique identifier when applying this to your grid as to not disturb any other part of you application that may be using the same column class: in the example .gallery is used with the .row div or you can add a class like .item to each column individually and so on.

Example

@media (min-width: 992px) {
  .gallery .col-md-3:nth-child(4n+1) {
    clear: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-lg-8">
      <div class="row gallery">

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/350x350" alt="alt" />
            <div class="caption">
              <strong>1</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </div>
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/350x350" alt="alt" />
            <div class="caption">
              <strong>2</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem
              Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </div>
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/350x350" alt="alt" />
            <div class="caption">
              <strong>3</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </div>
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/350x350" alt="alt" />
            <div class="caption">
              <strong>4</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </div>
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/350x350" alt="alt" />
            <div class="caption">
              <strong>5</strong> Lorem Ipsum is simply dummy.
            </div>
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://placehold.it/350x350" alt="alt" />
            <div class="caption">
              <strong>6</strong> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </div>
          </a>
        </div>

      </div>
    </div>

    <div class="col-lg-4">
      <strong>Side</strong>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
        ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
        ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
        ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </p>
    </div>

  </div>
</div>