Bootstrap 3 | Column height on Grid System

Question

good morning!

I am new here in the forum and I am 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).

By decreasing the size of the browser window, the grid system adjusts the columns, playing to the bottom row.

When the window decreases well, the problem happens. As the text in the first column is a little longer than the others, the height is therefore a little higher. With this, the 3rd column was played to the right and the 4th column was played to the bottom line.

Follow the grid source code.

<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 any way that the columns are the same height, or don’t leave that space all empty?

Thank you

Answer 1

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

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

From a search of how to use.

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

Answer 2

Lucas,

I’ve been there, and I’ve been there:

I created a custom class:

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

So, in every frame of yours, you add 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 minimal height, regardless of whether they have 1 or 2 lines of description.

To learn more: W3schools: CSS Min-Height