Bootstrap portofolio - empty mesh space

Question

I'm having problems with the grid in bootstrap grid. I have free spaces in a row. this is displayed on the desktop, and on the mobile phone - .

The code I'm 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 really don't know how I can fix this, so I hope someone can give me some advice.

Answer 1

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

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

Change 200px to the minimum that will fit the columns in the appropriate places.

Answer 2

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

• Set all divs to equal heights manually.

• Use something like https://github.com/liabru/jquery-match-height to set div heights for you. There are various settings that you can use, for example, in a row for each row.

• Use flexbox grids. Unfortunately, flexbox is not yet widely available.

• Use a flexbox mix with JavaScript-like http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Answer 3

make sure all book images are the same size ... or just set the min-height to the portfolio-element class.

Answer 4

Just add a clearfix class after each line