There is a recurring issue I encounter where it takes too long for me to solve the problem. My goal is to ensure that the bootstrap boxes at the bottom of the page have the same height. I attempted to set a fixed height in pixels using my CSS, but this caused problems. I also tried setting a percentage height, but that did not work either. What is the correct way to set the height so that all the boxes expand to the same height when additional text is added?
Portfolio
HTML (I've only inserted one column here to avoid filling up the code section too much)
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
.panel-pricing {
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
h3.panel-pricing {
color: #999;
font-size: 20px;
}
.panel-pricing .panel-heading {
padding: 20px 10px;
}
.panel-pricing .panel-heading .fa {
margin-top: 10px;
font-size: 58px;
}
.panel-pricing .list-group-item {
color: #777777;
border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-pricing .list-group-item:last-child {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.panel-pricing .list-group-item:first-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
.panel-pricing .panel-body {
background-color: #f0f0f0;
font-size: 40px;
color: #777777;
padding: 20px;
margin: 0px;
}<section id="plans">
<div class="container">
<div class="row">
<!-- item -->
<div class="col-md-4 text-center">
<div class="panel panel-danger panel-pricing">
<div class="panel-heading">
<i class="fa fa-money" aria-hidden="true"></i>
<h3>Plan 1</h3>
</div>
<div class="panel-body text-center">
<p><strong>$100 / Month</strong>
</p>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
<li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
<li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
</div>
</div>
</div>
</div>
</div>
</section>