Bootstrap 3 | Height of columns in the Grid System

Navigation
1

Good morning!

I'm new here in 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).

Bydecreasingthesizeofthebrowserwindow,thegridsystemwilladjustthecolumnsbyplayingdowntheline.

Bydecreasingthewindowwell,theproblemhappens.Asthetextofthe1stcolumnisalittlemoreextensivethantheothers,theheightconsequentlyisalittlehigher.Withthat,the3rdcolumnwasplayedtotherightandthe4thcolumnwasplayedtothebottomline.

Followthesourcecodeofthegrid.

<divclass="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 for the columns to be the same height, or do not leave that space all empty?

Thank you

    
asked by anonymous 27.11.2015 / 14:27

2 answers

0

Lucas,

I've already gone through this, and I resolved this:

I created a custom class: 

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

So, in each 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 a minimum height, regardless of whether they have 1 or 2 lines of description.

To find out more: W3Schools: CSS Min-Height

    
27.11.2015 / 15:04
1

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

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

Of a researched how to use.

Here's an example: link

    
11.07.2017 / 18:05
Minimization Sass css / js SQL Query Displays all logs