Bootstrap not equal height on columns

Question

I am making a website for an exam and I must make 8 categories of products which must be on two rows with equal height columns. However, the columns are not equal height when a column has more text than the others. I have tried with this way

.row [class*="col-"] {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row {
  overflow: hidden; 
}

This way

.equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.equal > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

I think that something in my bootstrap is the problem or something else. Here is my html and css

<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="img/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="img/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="img/led.png" >
                 <h4 class="card-title">Основно
                    осветление</h4>
            </div>
        </div>
    </div>
</div>

CSS

@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; 
}

Do you have to use Bootstrap? If not, looks like using `display: grid` or `display: flex` could solve your problem. If you don't know about them, search and look them up. As far as I remember they adjust column height automatically so all the elements on the same row are the same height. — Debadeep Sen, May 01 '21 at 18:26

score 0 · Answer 1 · answered May 01 '21 at 18:33

0

Hi Try this code for an equal column

.row{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap; 
    margin-right: -15px;
    margin-left: -15px;
}

.row > [class*='col-'] {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

answered May 01 '21 at 18:33

Jay varmora

83
1
2
8

now they are on 2 columns and 4 rows https://ibb.co/L03H2f3 it should look like this but equal https://ibb.co/0GSvk5n – datsikk May 01 '21 at 19:39

Bootstrap not equal height on columns

1 Answers1