0

I've created a bootstrap theme with 4 panel boxes and with text in it. Three of the boxes have have 3 snetence in one of the box is only 1 sentence. The Problem is, that the three boxes have a different height than the one box with the little text.

Is there a CSS option to create the panel - boxes with the same height, does not matters how much text are in the boxes?

Edit:

Here the code

<div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="row">
                    <div class="col-sm-12  text-center">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                            <h3>Heading</h3></div>
                            <div class="panel-body ">
                                <p>Much Text, to much for here :)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
Banbu
  • 1
  • 2

1 Answers1

0

You can try just making a table, or you can use display:table on the element which contains the boxes, and display:table-cell on the boxes.

You can also try using a flex grid.

How do I keep two divs that are side by side the same height?

Community
  • 1
  • 1
Irontiga
  • 23
  • 8