How to get a number of divs to remain the same height

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.

box-sizing might help?

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.