How can I avoid breaking Bootstrap columns into rows when I use less than 12 cols?

Question

I'm trying to align a site-name + 2 images as my site header. Using Bootstrap grid layout, I can easily achieve this with a nice looking in medium/large size devices.

| site-name                                                        | | image1 | | image2 |

However, with small size devices, my 3 columns breaks into 3 rows and the layout is not what I want:

| site-name                                                        |
| image1    |
| image2    |

As I'm using just 3 small columns, I would like to fit them in the same row since they are using just a few pixels. The result for small screens would be something like:

| site-name | | image1 | | image2 |

I have created a Bootply demo. The code below is the best that I could do so far. I've already tried using things like .pull-right to avoid adding the empty 8-cols, but the result was the same.

Current code:

<div class="row">
  <div class="col-sm-2">
    <h2>text1</h2>
  </div>

  <div class="col-sm-8">
    <!-- empty -->
  </div>

  <div class="col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

score 0 · Accepted Answer · answered Jul 12 '15 at 14:35

It sounds like what you consider "small" devices is what Bootstrap would consider "extra small".

This should give you the desired effect:

<div class="row">
  <div class="col-xs-4 col-sm-2">
    <h2>text1</h2>
  </div>

  <div class="hidden-xs col-sm-8">
    <!-- empty -->
  </div>

  <div class="col-xs-4 col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-4 col-sm-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

You might need to step all the classes up to the next size to get what you want (e.g. "col-sm-4 col-md-1")

Ty! It seems that the `.hidden-xs` class is the trick to solve the problem. — mugiwara, Jul 12 '15 at 14:55

score 0 · Answer 2 · edited May 23 '17 at 12:29

It's because you've used col-sm, and not col-xs (which is more for small screens like mobile).

Try this:

<div class="row">
  <div class="col-xs-2">
    <h2>text1</h2>
  </div>

  <div class="col-xs-8">
    <!-- empty -->
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

Or this:

<div class="row">
  <div class="col-xs-10">
    <h2>text1</h2>
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>

  <div class="col-xs-1">
    <img src="http://placehold.it/60x60">
  </div>
</div>

You can read a good explanation here:

Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap

Ty, it works, but Brian's answer has a better layout looking (your suggestion gets the images to be merged). — mugiwara, Jul 12 '15 at 14:55

How can I avoid breaking Bootstrap columns into rows when I use less than 12 cols?

2 Answers2