Varying content height and spacing issues using bootstrap grid

Question

I have an issue related to using a bootstrap grid in and angular/bootstrap modal. The content that is in the grid are checkboxes with names next to them. The names can vary in length so they can potentially wrap to 2 lines (technically there could be as many wrapped lines as there are unique words in the name, but typically that would be <=2). The oddness that I see is that if there is a name in the first column that has to wrap, but the same row of the 2nd and 3rd columns do not wrap, things look fine and there is no empty line space. Screenshot. When the first column doesn't wrap on a given row but the 2nd or 3rd column does have to wrap, there is a big empty space in the 1st column (2), but when the first column is the one that wraps, columns 2 and 3 work fine (1).

It is especially noticeable when the wrapping cascades, like screenshot 2.

Html for grid:

<div class="row">
 <div ng-repeat="courseStudent in course.students">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">
    <label>
      <div class="input-wrapper">
        <input type="checkbox" ng-checked="courseStudent.assigned" ng-click="toggleStudent(course,courseStudent)"/>
      </div>
      <div>{{courseStudent.student.name}}</div>
      <div class="clearfix"></div>
    </label>
  </div>
</div>

LESS for grid

.row {
 .input-wrapper {
   float: left;
   width: 14%;
 }
}

Does anyone know how, if possible, to have the grid collapse that empty space evenly? When I look in the dev tools, that space doesn't even show up. None of the divs for the surrounding cells have padding or seem to occupy that space. Any ideas?

bootstrap 3.3.1 angularjs 1.2.15 angular-bootstrap 0.10.0

That won't work in this case because that just results in just having 1 column. The point in using the grid is to allow the number of columns to be dynamic based on the display size, if I try a fixed number of columns per row then I might as well just use an actual table, unless Im missing something, I did try it though to be sure. — Luke Rice, Jun 26 '14 at 18:19

jme11 · Accepted Answer · 2014-06-27T07:54:32.170

The reason this happens is that each of the columns uses float left to create the grid. So, you have a couple of options:

If you know the maximum height your inputs, then you can give your cell class a set height. This might not be ideal since you're dynamically generating your content.
Use a plugin like Masonry to make the content 'fit' into the available space. This creates a cool tiled effect, but may not be ideal for your particular content.
Use jQuery or vanilla Javascript to dynamically adjust the column heights to be equal to the maximum height of the tallest column div.

A jQuery example of the third option would look like (actually, I guess since you're using AngularJS, you should do this in a directive, but here's an example anyway):

var row=$('.row');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

P.S. There's really no need to include a col class for every breakpoint as you have done here: <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">. It is sufficient to just write: <div class="col-sm-4 col-xs-6 cell">. Think of col classes as additive. You only need to specify one at a particular breakpoint if you want to change the behavior at that point.

Cool, thanks for the info. I had considered the height fix but it may not look good, but monday I will give your suggestions a shot and figure out what works best. — Luke Rice, Jun 27 '14 at 21:13
You can take a look at the alternative that I posted here: http://stackoverflow.com/questions/24494409/bootstrap-gaps-between-columns/24513710#24513710. It's based on the newly release 3.2.0 (just last week). Sorry I didn't see the announcement sooner. — jme11, Jul 01 '14 at 15:33
That looks promising, I'll explore it first chance I get, I had to move on to a new task but I'll be back on this bug soon. Thanks for the help! — Luke Rice, Jul 02 '14 at 13:41

score 2 · Answer 2 · answered Jul 11 '15 at 18:34

The official Bootstrap answer, in the link in @jme11's comment needs to be a top level answer. See also his link to the bootstrap docs. Insert this div between the rows which need to be reset.

 <!-- Add the extra clearfix for only the required viewport -->
 <div class="clearfix visible-xs-block"></div>

Varying content height and spacing issues using bootstrap grid

2 Answers2