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;

Answer 2

In your case if you see the height of div above test3 icon increases as the screen size decreases so you have to fixed the height of that div according to your requirements. For example.

Css:

.test {
     height: 40px;
}

HTML:

<div class "row">
   <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 test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <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">Test2</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <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">Test3</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <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">Test4</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
</div>