Keep Bootstrap panels the same size independtly from content inside them

Question

I have multiple Bootstrap panels, but they all have individual height based on the content inside them.

Take a look at the picture, all the panels have unequal height. I want them to have a general height, and to be responsive too.

I've tried using:

min-height;
max-height;
heigth: x !important;

But none of them seems to work.

Here is my code:

.panel{
    text-align: center;
    min-height: 150px !important;
    max-height: 300px;
}

HTML (note that I'm adding 3 panels inside one row.

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 p1" data-clickstate="0">
            <div class="panel panel-default" id="panel_1">
                <div class="panel-body" style="display: inline" id="cat_1">

                    <div class="icono">
                        <img src="media/iconos/motores_busqueda.png" alt="">
                    </div>
                    <div class="nombre-y-des">
                        <div>
                            <h5 class="nombre">Motores de búsqueda</h5>
                        </div>
                        <div class="des">
                            <p>Servicios de búqueda de páginas web.</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-4">
            <div class="panel panel-default" id="panel_2">
                <div class="panel-body" id="cat_2" style="display: inline">
                    <div class="icono">
                        <img src="media/iconos/navegadores.png" alt="">
                    </div>
                    <div class="nombre-y-des">
                        <div>
                            <h5 class="nombre">Navegadores</h5>
                        </div>
                        <div class="des">
                            <p>Programa que permite navegar por internet, renderizado páginas HTML en contenido visual y
                                comprensible.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-4">
            <div class="panel panel-default" id="panel_3">
                <div class="panel-body" id="cat_3" style="display: inline">
                    <div class="icono">
                        <img src="media/iconos/servidores_correo.png" alt="">
                    </div>
                    <div class="nombre-y-des">
                        <div>
                            <h5 class="nombre">Servidores de correo</h5>
                        </div>
                        <div class="des">
                            <p>Servicio que permite enviar y recibir mensajes mediante sistemas de comunicación eletrónicos
                                en línea.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Ok, guys, I found a simple way.

Reading @IronWilliamCash comment, I used:

height: xpx;

Inside .panel (it didn't worked in .panel-body).

And voila! All same height, and to keep them responsive just use @media queries.

@media (min-width: 768px) { 
    .caracs{
    width: 500px !important;
    font-family: 'Poppins', sans-serif;
    } 
.panel{
    text-align: center;
    height: 255px;
    }
}
@media (min-width: 992px) { 
    .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
    } 
}
@media (min-width: 1200px) { 
    .caracs{
    width: 810px !important;
    font-family: 'Poppins', sans-serif;
    }
    .panel{
        text-align: center;
        height: 165px;
    }
}

Answer 2

Here's a fiddle that may help you: https://jsfiddle.net/DTcHh/23594/

When the height-related properties are added on .panel-body, you can change the height of your panels to a fixed height, also, you have remove the css code: display: inline;

In the JSFiddle, I created another class for height fixing as follows:

.fixed-panel {
    min-height: 300px;
    max-height: 500px;
    overflow-y: scroll;
}

Hope this helps you!