Bootstrap Column resizing

Apr 18, 2016 at 6:21 PM
So, great project. One thing I did see is that when a web part zone is empty there is white space instead of the web parts expanding to fill the area.

I created this JQuery to fix the problem so that web parts will fill the leftover space while still staying responsive.
$('.ms-table.ms-fullWidth.row').each(function() {
    var row = jq(this);
    row.children().each(function () {
      var col = $(this);
      col.children().each(function () {
          var emptyEl = jq(this);
          if (!$.trim(emptyEl.html()))
          {
            col.remove();
          }
      });
    });
    var size = 12 / row.children().length;
    row.children().removeClass().addClass('col-sm-'+size);
});
Basicly it examines the zone and looks for children within it. if there aren't any children then it removes the column.

Hope this helps someone in the future.