How to Fix Gaps in Bootstrap Stacked Rows?

Gap in Bootstrap Stacked Rows?

When creating a Bootstrap grid that stacks from larger to smaller screen sizes, it's common to encounter gaps when items with long content disrupt the stacking order. Here are several solutions to address this issue:

1. Set Element Heights:
Assign a fixed height to all elements in your portfolio grid.

2. Use Masonry:
Employ a library like masonry.js that dynamically adjusts element sizes to fit into available spaces.

3. Responsive Class and Clearfix:
As described in Bootstrap's documentation under "Responsive Column Resets," use responsive classes and add a div with the "clearfix" class following each element in the grid to prevent gaps.

4. jQuery Height Adjustment:
Use jQuery to adjust the height of columns dynamically based on the maximum height within the grid.

Example using the Responsive Class and Clearfix Approach:

Add a "clear" class to each element in the grid:

`<div>

<div>

`

Add CSS to handle different breakpoints:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
        content: '';
        display: table;
        clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
        content: '';
        display: table;
        clear: both;
    }
}

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