Bootstrap 3 / height of columns in Grid System

Good Morning!

I'm new here on the forum and I'm developing a page using bootstrap 3 and I have a question about the Grid System.

I have a row with 4 columns (I left the background of the columns highlighted in black).

insert the description of the image here

By decreasing the size of the browser window, the grid system will adjust the columns, playing to the bottom line.

When you decrease the window well, the problem happens. As the text of the 1st column is a little more extensive than the others, the height consequently is a little higher. With this, the 3rd column was thrown to the right and the 4th column was thrown to the bottom line.

insert the description of the image here

Follows the source code of the grid.

<div class="container">
    <div class="row" style="background-color: #378;">
        <div class="col-sm-12 col-md-6 col-lg-3" style="background-color: #666">
            <div class="thumbnail avatar view-team">
                <i class="fa fa-car fa-4x" style="color: #A0CD4C;"></i>
                <div class="caption">
                    <h4>Melhor</h4>
                    <p>O mais completo gerenciador de bla bla bla</p>
                </div>
            </div>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-3" style="background-color: #555">
            <div class="thumbnail avatar view-team">
                <i class="fa fa-thumbs-o-up fa-4x" style="color: #415E9B"></i>
                <div class="caption">
                    <h4>Confiabilidade</h4>
                    <p>Qualidade e experiência comprovada</p>
                </div>
            </div>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-3" style="background-color: #333">
            <div class="thumbnail avatar view-team">
                <i class="fa fa-heart-o fa-4x" style="color: #FF0000;"></i>
                <div class="caption">
                    <h4>Favorito</h4>
                    <p>O sistema favorito dos clientes</p>
                </div>
            </div>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-3" style="background-color: #444">
            <div class="thumbnail avatar view-team">
                <i class="fa fa-usd fa-4x" style="color: #F9E221;"></i>
                <div class="caption">
                    <h4>Preço</h4>
                    <p>A Teste1 garante o melhor preço para você</p>
                </div>
            </div>
        </div>

    </div>
</div>

Is there a way for the columns to be the same height, or not to leave this space all empty?

Thank you

Author: Victor Stafusa, 2015-11-27
Source

2 answers

Lucas,

I've been through it, and I solved it like this:

I created a custom class: 

/* substitua 200px pela altura do quadro com duas linhas, "MELHOR" */
.min-height-200 { min-height: 200px; }

Then, in each frame of yours, vc adds this class: 

 <div class="col-sm-12 col-md-6 col-lg-3 min-height-200" style="background-color: #666">
   [...]
 </div>

This will ensure that your frames have minimum height, regardless of whether they have 1 or 2 description lines.

To learn more: W3Schools: CSS Min-Height

 0
Author: Thiago Lunardi, 2015-11-27 14:04:39

Although the post is old, it can help other people, I solved using the following.

<div class="clearfix visible-xs-block"></div>

Of a researched how to use.

Here is an example: https://codepen.io/millano572/pen/bpzgja

 1
Author: Luciano Donato, 2017-07-11 16:05:23