CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Coding Monkeys
Coding Monkeys

Reputation: 58

Bootstrap Grid System: Reset Vertical Space

I am trying to create a responsive newsfeed page using Bootstrap. There is nothing wrong with the mobile version, as you can see in the screenshot below.

The problem occurs when the screen gets larger, and I would like to display the elements in two separate columns. When one of the two top elements in both columns is vertically larger than the other, the third element will be pushed down as you can see on the second image. The goal is to remove the vertical space between A and C.

Using two different rows inside a large row (representing the two columns) is no option, because the order of the elements is important, as well in the mobile version as in the desktop version.

Currently each element has as class 'col-xs-12 col-sm-6'.

See JSFiddle for complete code: https://jsfiddle.net/4v40x5a3/

<div class="row>
<div class="col-xs-12 col-sm-6"></div>
<div class="col-xs-12 col-sm-6"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>

Mobile version example (no issues) :

enter image description here

Desktop version example(vertical space issue) :

enter image description here

Upvotes: 1

Views: 1545

Answers (4)

Nathan Geffen
Nathan Geffen

Reputation: 439

I have been dealing with the same problem. James Cazetta's Isotope/Masonry solution will work. But here's a Javascript/jQuery hack I did. Seems to work.

"content-main" is equivalent to the "A" div in the question. "content-extra" is equivalent to the "B" div in the question.

 var bottom_div_changed = false;
 function fix_bottom_div() {
     if (window.innerWidth > 991) { // Replace 991 with desired screen size
         var $el = $('#content-main');
         var bottom = $el.position().top + $el.outerHeight(true);
         var $el = $('#content-extra');
         var top = $el.position().top;
         var diff = top - bottom;
         if (diff > 0) { // If you want more margin, use number bigger than 0.
             $el.css("margin-top", -diff);
             bottom_div_changed = true;
         };
     } else if (bottom_div_changed == true) { 
         // This can happen if the screen is resized to less than 991.
         var $el = $('#content-extra');
         $el.css("margin-top", 0);
     }
 };
 $(window).resize(function () {
     fix_bottom_div();
 });
 $(window).load(function() {
     fix_bottom_div();
 });

Upvotes: 0

O&#39;Brien
O&#39;Brien

Reputation: 43

.pull-left and .pull-right will automatically fix them appropriately depending on the screen sizes.

Upvotes: 0

James Cazzetta
James Cazzetta

Reputation: 3220

If the order is important and a solution (like the one @AlexG provided) is no option, then I would recommend using the brilliant Isotope/masonry plugin. I used it in the exact same context.

Download, include it and then add the following code:

HTML:

<div class="row>
    <div class="col-xs-12 col-sm-6 item"></div>
    <div class="col-xs-12 col-sm-6 item"></div>
    <div class="col-xs-12 col-sm-6 item"></div>
</div>

..and in your scripts.js or before the body closure tag:

// init isotope layout
$isotopeContainer   =   jQuery('div.container > div.row');
$isotopeContainer.isotope({
    masonry: {
        columnWidth: '.item'
    }
});

..and in CSS:

You might consider defining a width for the column elements for your mobile view - otherwise they might appear in different widths. (see this question)

@media (max-width: 991.9999px) {
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        width: 100%
    }
}

Additionally, if you use the collapsible functionality of bootstrap:

// update isotope layout
jQuery('div.container').find('div.tools > a.collapse').on('click.collapse.data-api', function (event) {
    setTimeout(function() {
        jQuery('div.container > div.row').isotope( 'layout');
    }, 350);
});

Worked like a charm in my case, let me know if you need further help..

Upvotes: 1

AlexG
AlexG

Reputation: 5919

Dont forget you can put rows into cols. Lets say you have 6 items in total. You just split the first half into the left col and the second half into the right col. The only issue you might have is that one col is a lot higher than the other one, might be caused by too many large content panels.

You could also simply just limit the height of your content. And show the full article on a seperate page

<div class="col-xs-12 col-sm-6">
    <div class="row">
        3 items here
    </div>
</div>

<div class="col-xs-12 col-sm-6">
    <div class="row">
        3 items here 
    </div>
</div>

Upvotes: 0

Related Questions