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