sklrboy sklrboy - 2 months ago 14
CSS Question

How to prevent Bootstrap columns jump from one part to the other or under each other?

I'm working on a testimonial part for my project. There are 4 divs, but their content is uneven, therefore when I start to pull the width of the screen together, in

col-sm-6
they're supposed to line up like 2-2, but the div no.3 jumps over to the place of div no.4, leaving an empty space behind, then the div no.4 jumps a row below. How can I prevent them of messing up? I've tried adding
max-width
, but that didn't work either...



.testimonial-content {
text-align: center;
margin: 15px auto 15px auto;
}
.testimonial-content h5 {
margin-top: 20px;
}
.testim-logo-container {
height: 100px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.testimonial-logo {
max-width: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="row">
<div class="testimonial-content">
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="testim-logo-container">
<img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/999/000/?text=1" alt="testimonial logo">
</div>
<p>"It's amazing to see the progress of the students, that Laszlo and Balazs has been going through during the Multimedia Design education at the IBA."</p>
<h5>Tina Østergaard Filsø</h5>
<h5>Visual Communication - IBA</h5>
</div>
</div>
<div class="testimonial-content">
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="testim-logo-container">
<img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/6c9/000/?text=2" alt="testimonial logo">
</div>
<p>"Laszlo showed dedication and self discipline during his period with Our Daily Heroes."</p>
<h5>Gyula Vajda</h5>
<h5>CEO - Our Daily Heroes</h5>
</div>
</div>
<div class="testimonial-content">
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="testim-logo-container">
<img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/c96/000/?text=3" alt="testimonial logo">
</div>
<p>"It was great to work with Balazs, easy going, enthusiastic, works fast and on a reasonable price."</p>
<h5>Dániel Szilágyi</h5>
<h5>Founder - BudapestDenTrip</h5>
</div>
</div>
<div class="testimonial-content">
<div class="col-lg-3 col-sm-6 col-xs-12">
<div class="testim-logo-container">
<img class="img-responsive testimonial-logo" src="http://placehold.it/200x50/96c/000/?text=4" alt="testimonial logo">
</div>
<p>"Laszlo was a top-A intern, he took the assignments very seriously and executed them well.<br />He is enthusiastic to learn and experience new things."</p>
<h5>Björgvin Pétur</h5>
<h5>Senior Designer - //JÖKULÁ</h5>
</div>
</div><!-- Testimonials end-->
</div><!-- Testimonials row ends-->




Answer

You gotta give fixed height for the boxes. Since its height may vary with text, alignment issue will occur.

for eg:

.col-lg-6{
 height: 500px;
}

A common and quick way to solve this problem is use equal-height using JavaScript.

https://css-tricks.com/equal-height-blocks-in-rows/

equalheight = function(container) {

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    $(container).each(function() {

        $el = $(this);
        $($el).height('auto')
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; // empty the array
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}
$(window).resize(function() {   //to work in resize
    equalheight('.col-lg-6');
});

$(document).ready(function() {
 equalheight('.col-lg-6');
});
Comments