How to get equal dynamic height equal to width.

Sunday, July 16, 2023

The code snippet ensures that the height of a Bootstrap grid column always remains the same as its width. (For Example: col-lg-3 is equal to width 25% or 270px so height will automatically be 270px).

equal-height-column.html

<!-- Shape  -->
<div class="col-lg-3 col-md-6 col-6 equal_height_column">
    ...
</div>

equal_hieght_column.css

.equal_height_column {
  position: relative;
}

.equal_height_column::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.equal_height_column > * {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}