How to Eliminate Gaps in Stacked Bootstrap Rows?

Gaps in Stacked Bootstrap Rows: Solutions

In Bootstrap-based grids, it's common to encounter issues with gaps when tiles of varying heights stack. To address this, consider the following approaches:

1. Set Element Heights:

Assign a fixed height to all elements within the portfolio to ensure consistent alignment.

2. Masonry Layout:

Use a tool like Masonry to automatically adjust element heights and fit them within the available space.

3. Responsive Columns Reset:

Bootstrap provides "responsive column resets." By applying these classes to your grid, you can dynamically set column heights and avoid gaps.

4. Clearfix with Media Queries:

After each element, add a div with a mini clearfix. This can be hidden using media queries, effectively addressing the gap issue.

Code Example:

<div class="row portfolio">
  <div class="col-lg-2 col-sm-3 col-xs-4">
    <div class="panel panel-default">
      ... (Element content)
    </div>
  </div>
  <div class="clear"></div>  <!-- Added after each element -->
  ... (Additional elements)
</div>

@media (max-width: 767px) {
  .portfolio > .clear:nth-child(6n)::before {
    /* Clearfix for mobile devices */
  }
}

jQuery Approach:

var row=$('.portfolio');
$.each(row, function() {
  var maxh = 0;
  $.each($(this).find('div[class^="col-"]'), function() {
    if($(this).height() > maxh)
      maxh = $(this).height();
  });
  $.each($(this).find('div[class^="col-"]'), function() {
    $(this).height(maxh); // Set element heights uniformly
  });
});

The above is the detailed content of How to Eliminate Gaps in Stacked Bootstrap Rows?. For more information, please follow other related articles on the PHP Chinese website!