Hi,
I am trying to get the below divs to remain the same height.
I am using Bootstrap and W3 CSS stylesheets.
At the moment, they are slightly different sizes because they expand/contract based on the amount of text within them.
Here is my HTML:
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-newspaper-o" aria-hidden="true"></i>
</span>
</div>
<!--panel-heading-->
<div class="panel-body">
<h4>News</h4>
<p>Would you like to read our latest newsletter?</p>
<a href="#" class="btn btn-primary">Read</a>
</div>
<!--panel-body-->
</div>
<!--panel-default-->
</div>
<!--col-lg-3-->
<div class="col-lg-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-buysellads" aria-hidden="true"></i>
</span>
</div>
<!--panel-heading-->
<div class="panel-body">
<h4>Advertise</h4>
<p>Would you like to advertise your local business here?</p>
<a href="#" class="btn btn-primary">Contact Us</a>
</div>
<!--panel-body-->
</div>
<!--panel-default-->
</div>
<!--col-lg-3-->
<div class="col-lg-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
<!--panel-heading-->
<div class="panel-body">
<h4>Organise an Event</h4>
<p>Would you like to suggest a potential future event in the community?</p>
<a href="#" class="btn btn-primary">Contact Us</a>
</div>
<!--panel-body-->
</div>
<!--panel-default-->
</div>
<!--col-lg-3-->
<div class="col-lg-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
</div>
<!--panel-heading-->
<div class="panel-body">
<h4>Feedback</h4>
<p>Please send your news, photos, comments, suggestions, etc.</p>
<a href="#" class="btn btn-primary">Contact Us</a>
</div>
<!--panel-body-->
</div>
<!--panel-default-->
</div>
<!--col-lg-3-->
</div>
<!--row-->
Can someone please show me how to get each of these divs (col-lg-3) to match the size of the largest of them.
Thanks a lot in advance.