Make bootstrap boxes the same height on all devices

Question

I have been trying to make two panels(boxes) the same size, no matter how long is the text inside them. I have realised that on my computer the two boxes are aligned, but on my laptop they aren't. Here's how the page looks like on my laptop:

The code :

<div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                Bine aţi venit la ATLmath!
            </h1>
        </div>
        <div class="col-md-6">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4><i class="glyphicon glyphicon-book"></i> Probleme rezolvate</h4>
                </div>
                <div class="panel-body">
                    <p>Puteţi găsi modele de probleme rezolvate, împreuna cu explicaţii si desene pentru a asigura fixarea cunoştinţelor. Problemele rezolvate sunt grupate in două categorii:</p>
                    <ul>
                        <li>Probleme de geometrie</li>
                        <li>Probleme de algebră</li>
                    </ul>

                    <a href="probleme.php" class="btn btn-primary" style="display:block;">Probleme</a>

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4><i class="glyphicon glyphicon-ok"></i> Probleme de testare a cunoştinţelor</h4>
                </div>
                <div class="panel-body">
                    <p>Testele de evaluare vor testa capacitatea elevilor de a rezolva probleme similare cu cele din categoria "Probleme rezolvate". Şi aici, problemele vor fi grupate in două categorii:</p>
                    <ul>
                        <li>Probleme de geometrie</li>
                        <li>Probleme de algebră</li>
                    </ul>
                     <a href="teste.php" class="btn btn-primary" style="display:block;">Teste</a>
                </div>
            </div>
        </div>
    </div>

I was wondering how I can make them the same height. I've searched this on google and I couldn't do anything good.

EDIT: I would like it to look like this on every device

`.panel{ height: 30%; }` or aren't you looking for a fixed height? (I assumed since you said "the same size no matter how long the text is" — Ivar Reukers, Oct 25 '16 at 07:51
Or do you want the 2 div's to be the same size no matter how long the text is? — Ivar Reukers, Oct 25 '16 at 07:51
I want both to be the same size, even if I have only 1 line of text in the first one and 5 in the second one — MCM, Oct 25 '16 at 07:54
In that case this is a possible duplicate of http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height — Ivar Reukers, Oct 25 '16 at 07:56

score 1 · Answer 1 · answered Oct 25 '16 at 07:53

You can achieve this by using min-width: ; and min-height: ; you can specify a minimal amount of pixels needed for the box using this, this will also prevent your website from deforming when using a different laptop/pc (screen sizes differ on each) and if you don't want it to get bigger either, you can also replace the min with max as statements too

score 0 · Accepted Answer · answered Oct 25 '16 at 10:09

You fix your problem using class "row-eq-height" it's a bootstrap default css for using maintain equal height of multiple columns into a row. You must check the html structure on my demo becoz i changed the structure little bit.

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">
            Bine aţi venit la ATLmath!
        </h1>
    </div>
</div> .........cont..

http://codepen.io/inewton/pen/rrRwAw

Make bootstrap boxes the same height on all devices

2 Answers2