Spacing not equal within bootstrap grid

Question

I got a weird problem with a bootstrap grid. The code looks like this:

<div class="row">
                    <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-2">
                       <img src="<?PHP echo _ROOT;?>/public/images/startpage/customer_large.jpg" class="img-responsive"/>
                    </div>
                    <div class="quote_right col-xs-10 col-xs-offset-1 col-sm-2 col-sm-offset-0">
                        <p class="text-center">
                            ‹‹Das Geheimnis des Erfolgs ist, den Standpunkt des anderen zu verstehen.››
                        </p>
                        <p class="text-center">
                            <span class="speaker">Henry Ford</span>
                        </p>
                    </div>
                </div>

On the webpage the content is displayed:

So there are two things:

Why is the last div container "wider" than the other? The other boxes are images with the img-responsive class.
How to make the last div the same height as the one on the left?

Thanks for your advice!

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jan 28 '16 at 19:15
http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Paulie_D, Jan 28 '16 at 19:17

score 0 · Accepted Answer · edited May 23 '17 at 11:45

For your second question, there are already many solutions available on Stackoverflow So, three solution that I know work...

Solution 1 using negative margins (doesn't break responsiveness)

    .row{
        overflow: hidden; 
    }

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
</pre>


Solution 2 using table
    
    .row {
        display: table;
    }

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}
</pre>


Solution 3 using flex added August 2015.(that I really don't prefer) 
    
    .row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display:         flex;
    }

Visit this link for the elaborated answer. How can I make Bootstrap columns all the same height?

thanks this has led me in the right direction. Greetings – da.eXecutoR Feb 10 '16 at 08:35 — da.eXecutoR, Feb 10 '16 at 08:35

Spacing not equal within bootstrap grid

1 Answers1