Bootstrap Grid Responsive break row

Question

I'm currently working with bootstrap grid system and got the following problem:

I got components that stack together in 4 columns when > tablet. and in 2 columns when < tablet. Some of the components are with Links and some without.

        <div class="col-xs-6 col-md-3">
            <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
          <div class="iconname">Test1</div>
          <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
          <div class="align-left"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
        </div>

http://jsfiddle.net/0q346dde/

This works fine, but between 440px and 485px width, the link with: > ABCDE TEST1 PRODUCTS gets a break row since there is no space any more. It occurs until the second link (which label has less characters) with > ABCDE TES PRODUCTS gets a break.

Now I've tried to set "white-space: nowrap;" on the links, but then it won't look good < 400px, since they overlap each other.

Anyone can help me?

Answer 1

EDIT: This answer is meant for bootstrap 3.x, the 4+ version use a flexbox grid system that shouldn't be affected by this problem.

Sometimes i change the grid columns from floating to inline-block to prevent this kind of behavior. Remember to clear every withespace between your columns or it will break your layout (http://css-tricks.com/fighting-the-space-between-inline-block-elements/).

.row.inline-block > *{display: inline-block; float: none; vertical-align: top;}

Then you can just add .inline-block class to your row

Here's a fiddle: http://jsfiddle.net/0q346dde/2/

BONUS: The inline-block columns can also be vertically centered with verical-align: middle; or aligned to the bottom with vertical-align: bottom;