How to Stack Divs of Varying Heights in Bootstrap Using CSS?

Stacking Divs of Varying Heights in Bootstrap Using CSS

In this scenario, the row system of Bootstrap poses a challenge in optimally displaying categories of varying heights. To address this issue without using the masonry plugin, consider the following CSS solution:

1. Utilize visible classes for responsive stacking:
   Utilize the .visible-sm, .visible-md, and .visible-lg classes in conjunction with clearfix. This ensures that floats are cleared appropriately based on screen size.

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

2. Example implementation:
   Below is a simplified demonstration for two categories with different heights:

   <div class="row">
       <div class="col-md-6">
           <div class="category-div">

3. Additional notes:

   • .visible-sm clears floats for small screens (<=768px)
   • .visible-md clears floats for medium screens (>768px)
   • .visible-lg clears floats for large screens (>1200px)
   • Adjust the style="height: ...;" attribute to suit your specific category div heights
   • Ensure that the clearfix class is applied outside of the columns to effectively clear the floats

By implementing this technique, you can achieve a responsive stacking of div elements with varying heights within the grid system of Bootstrap. This approach provides a pure CSS solution compatible with Bootstrap, addressing the need for optimal layout visualization.

The above is the detailed content of How to Stack Divs of Varying Heights in Bootstrap Using CSS?. For more information, please follow other related articles on the PHP Chinese website!