KrMa KrMa - 29 days ago 7
CSS Question

same height on div when expanding

I often run into a problem, where it is taking to long for me to solve. I would like that the bootstrap boxes in the bottom have the same height. I tried to set a height in px in my css, but that messes everything up. I also tried to set it with %, but that does not work. So how is the propper way to set the height, so all of the boxes are expaning to same height, if I add some text there is gonna make the box change the height?

Portfolio

HTML (Just inserted 1 col here, so the code do not fill so much)

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


CSS

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

Answer

update css and add min-height

.panel-pricing .panel-body {
    background-color: #f0f0f0;
    font-size: 40px;
    color: #777777;
    padding: 20px;
    margin: 0px;
    min-height: 115px;
}
Comments