Bootstrap portofolio - empty grid space

Question

I am having trouble with grid in bootstrap grid. I have empty spaces in a row. this is shown on desktop and on mobile is like .

The code which I am using is

  <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4  portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book1.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book2.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book3.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book4.png" alt="">
            </a>
        </div>

         <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book4.png" alt="">
            </a>
        </div>
       </div>

I don't really know how I could fix that, so I hope somebody can give me some advice.

Answer 1

You have to set min-height for the columns since the columns have different heights.

.portfolio-item {
min-height: 200px;
}

Change 200px for a minimum that would fit the columns in their respective places.

Answer 2

This is due to different heights on your divs. You have a few possible fixes for this:

1. Set all divs to equal heights manually.

2. Use something like https://github.com/liabru/jquery-match-height to set the heights of divs for you. There are different settings you can use such as on a row per row basis.

3. Use flexbox grids. Unfortunately flexbox isn't widely available yet 😵

4. Use a mixture of flexbox with JavaScript like this http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback