Bootstrap row-eq-height it's not working
30,381
The columns (in pink) are equal height.
.fase {
color: #ffffff;
background-color: #119c21;
font-size: 1.5em;
font-weight: bold;
text-align: center;
padding-top: 3%;
padding-bottom: 3%;
margin-bottom: 0;
}
.fase2 {
margin-top: 0;
color: #ffffff;
background-color: #42c250;
font-size: 1.3em;
font-weight: normal;
text-align: center;
padding-top: 4%;
padding-bottom: 4%;
margin-bottom: 0;
}
.fase3 {
margin-top: 0;
color: #119c21;
background-color: #c2ffca;
font-size: 1.3em;
font-weight: normal;
text-align: center;
padding-top: 4%;
padding-bottom: 4%;
margin-bottom: 0;
}
.row.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.col-md-4 {
background: pink;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ">
<div class="row row-eq-height">
<div class="col-md-4 text-center">
<h4 class="fase3">Identificación y estructuración del proyecto productivo en las fases de idea, perfil, prefactibilidad y factibilidad.</h4>
</div>
<div class="col-md-4 text-center">
<h4 class="fase3">Gestión del montaje de la unidad productiva.</h4>
</div>
<div class="col-md-4 text-center">
<h4 class="fase3">Gestión del montaje de la unidad productiva y gestión de la operación del proyecto.</h4>
</div>
</div>
</div>
If you want the background of the header element to extend all the way down, you need to make them 100% tall of the column..so I added this in this Codepen Demo
.col-md-4 {
background: pink;
border:1px solid grey;
display: flex;
flex-direction: column;
}
.col-md-4 h4 {
flex:1;
}
Author by
Admin
Updated on April 04, 2020Comments
-
Admin about 4 years
I'm using Bootstrap. I need three columns to have the same height. I tried different things (Link 1, Link 2) but they don't work.
row-eq-height
doesn't work either.HTML
<div class="container "> <div class="row row-eq-height"> <div class="col-md-4 text-center"> <h4 class="fase3">Identificación y estructuración del proyecto productivo en las fases de idea, perfil, prefactibilidad y factibilidad.</h4> </div> <div class="col-md-4 text-center"> <h4 class="fase3">Gestión del montaje de la unidad productiva.</h4> </div> <div class="col-md-4 text-center"> <h4 class="fase3">Gestión del montaje de la unidad productiva y gestión de la operación del proyecto.</h4> </div> </div> </div>
CSS
.fase { color: #ffffff; background-color: #119c21; font-size: 1.5em; font-weight: bold; text-align: center; padding-top: 3%; padding-bottom: 3%; margin-bottom: 0; } .fase2 { margin-top: 0; color: #ffffff; background-color: #42c250; font-size: 1.3em; font-weight: normal; text-align: center; padding-top: 4%; padding-bottom: 4%; margin-bottom: 0; } .fase3 { margin-top: 0; color: #119c21; background-color: #c2ffca; font-size: 1.3em; font-weight: normal; text-align: center; padding-top: 4%; padding-bottom: 4%; margin-bottom: 0; } .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }