CODEWITHSUNDEEP
htmlcssgridviewgrid
AndreG
AndreG

Reputation: 133

Bootstrap grid .col taller - same height

I've tried lots of solutions but can't find one. I have 3 different columns with different types of text and i need them to have the same height. But they are different like this: colums Can anyone help please?

Code: 

.col-sm-2{    
    color: #adadad;
    background-color: #dce7ee;
    font-size: 100%;
}

.col-sm-7{
    color: #433f40;
    background-color: #dce7ee;
    font-size: 200%;
   font-weight: bold;
}

.subtext {
    font-size: 100%;
    color: #00569f
}


.col1{
    color: #00569f;
    text-transform: uppercase;
    background-color: #c4d100;
}
.col2{
    color: #c4d100;
    text-transform: uppercase;
    background-color: #00569f;
}
<div class="container-fluid">
    <div class="row">
         <div class="col-sm-2"> 15 m <br>imagem</br> </div>
         <div class="col-sm-7">Fernando de Noronha <br class="subtext">+ de 500 vôos!</br></div>
         <div class="col-sm-3 col1">A PARTIR DE <br>R$1.220</br></div>
    </div>
</div>

Upvotes: 2

Views: 96

Answers (1)

Marcos Silva
Marcos Silva

Reputation: 2019

One method is using display: table like this. Hope that works.

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Upvotes: 1

Related Questions