Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gap in Bootstrap stacked rows

I am building a Bootstrap 3 grid that will become a portfolio page eventually. In the following bootply, in the first example, you can see it works perfectly stacking from 6 to 4 to 3 in my bootply

However in the second example, on the same bootply, there is an item where the tile for the item is longer and it causes a gap in the grid when it stacks.

What is the best bootstrap friendly ,solution to this? Any help much appreciated.

like image 267
Lilster Avatar asked Jul 04 '14 09:07

Lilster


People also ask

How do I add spacing between rows in Bootstrap?

If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.

How do I reduce the gutter space in Bootstrap?

The gutters between columns in our predefined grid classes can be removed with .g-0 . This removes the negative margin s from .row and the horizontal padding from all immediate children columns.

How can I remove space between two div tags in Bootstrap?

To make it more clear, bootstrap assigns margin-left: -15px and margin-right: -15px for . row selector and padding-left: 15px and padding-right: 15px on all . col-* selectors to get 30px space between all the cols. To remove this space, you have to set those values for margins and paddings to zero.

What is XS SM MD lg in Bootstrap?

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.


1 Answers

There are a couple of ways to handle this:

  1. Give all of the elements in your portfolio a set height.
  2. Use something like masonry to dynamically "fit" the elements into the available space.
  3. Use the responsive classes and clearfix as described in the doc under the heading Responsive column resets, in the Grid secion.
  4. Use jQuery to adjust the column heights dynamically.

If your content is dynamically generated so that you don't know which elements will have longer content, and you have different layouts set for different breakpoints, the responsive classes approach can be a bear to adapt. I use a little trick. After each element in the grid, I add a div that I can apply a mini clearfix to using media queries. It's extra markup, but it solves the problem nicely and allows me to have readable and maintainable markup while avoiding the use of javascript to adjust the layout. Here's an example using your markup:

Updated Bootply

<div class="row portfolio"> <!--Add a class so you can target with nth-child-->
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-body">
                <a href="#">
                    <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive">
                </a>
            </div>
            <div class="panel-footer">
                This is text
            </div>  
        </div> 
    </div>
    <div class="clear"></div> <!--Here's the added div after every element-->
  ....
</div> <!--/.portfolio.row-->

CSS:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

If you prefer the jQuery route (again, this assumes that you've added a class "portfolio" to the row that contains your portfolio elements for easier targeting):

var row=$('.portfolio');
$.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);
    });
});
like image 167
jme11 Avatar answered Oct 12 '22 11:10

jme11