As part of my exam project, I am designing a website that requires 8 categories of products to be displayed in two rows with equal height columns. However, I have encountered an issue where the columns do not maintain equal height when one column contains more text than the others. I have attempted to address this problem using the following code:
.row [class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}
I have also tried implementing the following solution:
.equal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.equal > [class*='col-'] {
display: flex;
flex-direction: column;
}
I suspect that there may be an issue with my Bootstrap or some other element causing this discrepancy. Below is the HTML and CSS code I have used:
<div class="container cat-con">
<div class="row">
<div class="col-sm-12 col-md-3 px-md-1">
<div class="content">
<img src="img/lamp-1.png" >
<h4 class="card-title">Мебелно Осветление</h4>
</div>
</div>
<div class="col-sm-12 col-md-3 px-md-1">
<div class="content">
<img src="stairs.png" >
<h4 class="card-title">Осветление за стълби</h4>
</div>
</div>
<div class="col-sm-12 col-md-3 px-md-1">
<div class="content">
<img src="billboard.png" >
<h4 class="card-title">Осветление за прозорци, реклами, рафтове и ръбове</h4>
</div>
</div>
<div class="col-sm-12 col-md-3 px-md-1">
<div class="[content]">
<img src="[led.png]" >
<h4 class="card-title">Основно
осветление</h4>
</div>
</div>
</div>
</div>
CSS Styles:
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
.content {
text-align: center;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
padding: 30px 5px;
margin: 6px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), #FFFFFF;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.content h4 {
font-size: 15px;
margin-top: 15px;
}
.content img {
width: 6rem;
margin-top: 10px ;
}
.cat-con {
margin-bottom: 40px;
}