1

See: http://www.anniestasjes.nl/40/producten.html?category=tassen I use bootstrap 3 for responsive layout. I get these huge gaps between products because sometimes the product title takes up two rows and the height of the div is a bit more then the other products. Someone knows a fix for this?

Matish
  • 127
  • 2
  • 10

4 Answers4

7

Make sure you're using the latest version of Bootstrap (currently v3.2.0).

The newly added responsive utilities will help you to accomplish this, as described in the documentation here.

Insert this div between the "rows":

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

Explanation:

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

So, in your case, you need to have a clearfix added for each of the lg/md breakpoints after every third element; for the sm elements after every fourth element; and for every xs element after every second element. Here's a Bootply example of how that would look.

Please note that as pointed out by @sean-ryan, you should be using the .row class instead of the old row-fluid, and you should not be wrapping the entire column in an anchor tag. I've corrected that below (and adjusted your css in the Bootply accordingly).

<div class="container">
    <div class="row products">
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Cowboysbag 'The Bag' Black</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Another Dynamite bag with a much longer title that will need to wrap</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>A hot handbag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-lg-block visible-md-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>I think I like the Green bag most</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-sm-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>I guess Tassen is Dutch for bag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>In German, bag is Tasche oder Handtasche (handbag)</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-lg-block visible-md-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>This is another handbag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Yet another cool bag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-sm-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Cowboysbag 'The Bag' Black</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
    </div> <!-- /row -->
</div> <!-- /container -->

If all of this is just too much markup for you, you can use jQuery instead to make the adjustments automatically as follows:

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);
    });
});
John Lehmann
  • 7,975
  • 4
  • 58
  • 71
jme11
  • 17,134
  • 2
  • 38
  • 48
  • Upvoted for the HTML portion of the answer. Using javascript for purely layout reasons is just bad voodoo. – Sean Ryan Jul 01 '14 at 15:53
  • @Matish, thanks...you might want to check out this answer too: http://stackoverflow.com/questions/24571062/gap-in-bootstap-stacked-rows/24571644#24571644, where I provide a simple solution for dealing with large groups of dynamically generated content using a common element and media queries, instead of the responsive classes. Here's the Bootply: http://www.bootply.com/U91pZvp81q – jme11 Jul 04 '14 at 14:07
0

Two simple ways to do this, that each come with their own downsides:

1) Set a fixed height of the product container: .product{height:300px}. This only works if you know a maximum # of lines your product description will ever have.

2) Put each row of products into their own .row: <div class="row"><div class="col-md-4 col-...">... This only works if you're ok not having your rows dynamic (e.g. always 3 accross) which looking at your example I think you're not.

A more dynamic way of handling this would be some javascript that reads the calculated height of the tallest .product container in a given row (not .row) and assigns that same height to it's neighbors... but this is beyond me at the moment:)

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39
0

Your main problem is that you are not using the grid system correctly.

Your issue is that you have one div.row that you then are placing ALL of your product <div>s in. Generally, one .row should only have a maximum of 12 columns in it per size. You can go more than that, but only if you ensure that the total for any particular size is a factor of 12, or you will end up with dangling boxes. And as stated at the beginning, 33 in one .row is definitely not the correct approach.

This is in addition to the following:

  1. .row-fluid does not exist any more in Bootstrap 3. It is now just .row.
  2. You shouldn't be wrapping the columns in <a> tags. If you are going to do that, wrap the contents of the columns instead.
  3. Once a column is in a row, it is going to need to stay in that row. Changing the columns via .col-[SIZE]-[N] should be for changing the width of that particular container, not adding more containers to a row. In other words, going from two products per row to three to four is just not going to happen.
  4. You do not need to declare .col-lg-4 if you have already declared .col-md-4. Bootstrap's grid system cascades up, meaning the last declared size applies to all larger sizes.

I would suggest you spend some time going back and familiarizing yourself with how Bootstrap's grid system works via the docs or any number of helpful answers to questions here on SO.

All that being said, there is a way for you to go from two products per row to four with a bit of nesting. See http://www.bootply.com/rymvydjpDn for a basic working example, and code is below:

<div class="row">
  <div class="col-xs-6">
    <div class="row">
      <div class="col-md-6">
        CONTENT...
      </div>
      <div class="col-md-6">
        CONTENT...
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-md-6">
        CONTENT...
      </div>
      <div class="col-md-6">
        CONTENT...
      </div>
    </div>
  </div>
</div>

A different way to approach the solution above, without all the nesting: http://www.bootply.com/fB84B9ovrF

<div class="row">
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
</div>
Sean Ryan
  • 6,048
  • 2
  • 25
  • 23
  • 2
    Sorry for the downvote. Everything in your answer is fine, but the first statement that one .row should contain a maximum of 12 columns so placing all of the cols in one row is 'straight up wrong' -- well, that is just straight up wrong. That is the beauty of the grid system, and one of its basic tenants to be able to have different layouts at different breakpoints. Even your example demonstrates that because at the xs/sm size, the inner row will have two elements which represent 24 cols total. – jme11 Jul 01 '14 at 10:30
  • While the total number of columns is indeed 24 for that "row" at smaller screen sizes, for default Bootstrap, each `
    ` only contains 12 columns, and should only ever contain 12 columns, which is the point I was making. If the total number of columns inside each `div.row` element is more than 12, then the row will not function as intended. I got around that by nesting, but only by continuing to operate within that rule. If you have a good example of a `div.row` element containing more than 12 columns per screen size and still functioning properly, I would love to see it.
     – Sean Ryan Jul 01 '14 at 11:59
  • The way the grid is designed it allows for elements to occupy multiple "lines" at different screen sizes. The OP wants 3 items across at md and up, 4 items at sm and 2 items at xs. This is only possible (and entirely correct) by not wrapping and nesting the elements in separate rows as you have done. 12 only represents the total number of grid units that can occupy a single horizontal space before the elements wrap on to the next "line". It's not true that you can or should only place a total of 12 column units in a single div with a row class. – jme11 Jul 01 '14 at 14:12
  • While you can put more than 12 columns in a single `.row`, it is generally wise to avoid it because it can cause the exact behavior illustrated by the OP. To further my point, there is not a single answer to the OP that 1. accomplishes what the OP is looking for while 2. uses the grid system without also using non-grid classes or even worse, javascript. However, I am willing to amend my statement: Each size within a `.row` should total to a factor of 12, or you will end up with a dangling box. All that being said, it is still terrible practice to place 33 `div.col-*-*` in to one `.row`. – Sean Ryan Jul 01 '14 at 14:51
  • I guess we have to agree to disagree...by the way, I posted an answer that uses straight up Bootstrap markup right out of the documentation to solve the problem without javascript. – jme11 Jul 01 '14 at 15:14
  • Indeed you did, and I upvoted it, as the HTML portion is a solid answer. I often forget about the visible+clearfix trick when dealing with breaking floats. That being said, there are going to be two additional conditionals when looping through those items as to when to fire each of those `.visible-*-block`'s, versus just the one if OP went with the 4/2 layout in my amended answer. In my opinion, giving up on the 3/4/2 layout to keep the view logic simple is the better long term approach, though I know that is outside the context of this question. – Sean Ryan Jul 01 '14 at 15:51
  • I've been back and forth on this max-12 or not issue since I started using bootstrap, and I've recently landed on it just doesn't matter. This seemed like an example that would change my mind, until @jme11's solution. Sean, do you think the # of times >12 cols in a row goes wrong is worth following the rule dogmatically? I just haven't seen enough examples of it to be convinced... – Shawn Taylor Jul 02 '14 at 03:37
  • @jme11 solution works within the framework of Bootstrap, but I think it is going against the spirit of how the grid was designed. I don't believe that mdo wanted someone to throw 33 items in to one `.row` element. Does it work? Sure, but that doesn't make it right, and it certainly is no longer semantic. After giving it some more thought, I think what I would do is add `.row` and `.col` attributes using the Bootstrap grid mixins to `.products` and `.product` respectively. Redundant? Yes, but the result would end up more semantic, and more in line with the intent of Bootstrap itself. – Sean Ryan Jul 02 '14 at 11:00
0

Just use pull-left class for each div so they will float left automatically or

each row seprately like

<div class="row">
    <div class="col-md-2">prod1</div>
    <div class="col-md-2">prod2</div>
    <div class="col-md-2">prod3</div>
</div>
<div class="row">
    <div class="col-md-2">prod4</div>
    <div class="col-md-2">prod5</div>
    <div class="col-md-2">prod6</div>
</div>
harshzalavadiya
  • 21
  • 1