How to Vertically Align Uneven Height Divs in Bootstrap Rows Using CSS Clearfixes?

Vertical Alignment of Uneven Height Divs in Bootstrap Using CSS Clearfixes

The goal is to vertically align divs of varying heights within a Bootstrap row without using external plugins like Masonry. Here's a CSS solution:

In the provided HTML structure, each category is represented by a div with the class "menu-category". These divs have different heights due to varying items within each category. To achieve the desired stacking, we can utilize Bootstrap's visibility classes.

Specifically, we can add a "clearfix" class with visibility modifiers to selectively clear the floats in the div layout. For instance, if you want to clear the floats only in medium and large screen sizes, you can use the following code:

<div class="clearfix visible-md visible-lg"></div>

Similarly, to clear floats only in small screen sizes, use:

<div class="clearfix visible-sm"></div>

By adding these clearing divs to appropriate places in the HTML structure, you can prevent the floating divs from wrapping to the next line, forcing them to stack vertically.

Example:

  

    ...
  
  

    ...
    <div class="clearfix visible-sm"></div>
  
  

    ...
  
  

    ...
    <div class="clearfix visible-md visible-lg"></div>
  
  

    ...
  

With this approach, the div heights will adjust dynamically based on the content, ensuring they stack neatly within the row container.

The above is the detailed content of How to Vertically Align Uneven Height Divs in Bootstrap Rows Using CSS Clearfixes?. For more information, please follow other related articles on the PHP Chinese website!