0

I am using Bootstrap to display a number of items within columns. For the most part these items are the same height so then they are displayed on the page in a series of neat rows. However, when 1 or more of these items are a different height, it leaves a gap between the next item below it.

Please take a look at this example: http://jsbin.com/tedoqe/edit?html,output
How do I reduce the gap between number (3) and number (6)?

I am not going to use a separate row for each row displayed as I want it to be a responsive layout with more items displayed per row on larger displays, and less on smaller displays. (I have left out the relevant classes in the example to clearly display the problem.)

dmeehan
  • 2,317
  • 2
  • 26
  • 31

1 Answers1

1

It's perfectly normal behavior. To solve this, please try Masonry or something similar.

Tomek Buszewski
  • 7,659
  • 14
  • 67
  • 112