How to Stack Bootstrap Divs of Different Heights Using CSS?

Stacking Divs of Different Heights in Bootstrap Using CSS

In the given layout, aligning these divs vertically remains a challenge due to Bootstrap's grid system. One can solve this issue through CSS without relying on plugins.

.menu-category {
  float: left;
  clear: both;
  padding: 0;
}

By applying these styles, the categories will float side-by-side, and with the clear property, the floats will clear after each category. This ensures optimal stacking.

To fine-tune the layout for various screen sizes, use Bootstrap's utility classes:

.visible-sm, .visible-md, .visible-lg {
  display: block;
}

.visible-sm {
  clear: both;
}

This CSS ensures that the categories will stack on smaller screens (e.g., smartphones) and clear the float after each category on larger screens (e.g., tablets and desktops).

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