Keep bootstrap columns in same row when changing size

Question

I have a div that has two columns - one holds a glyphicon, the other holds text. At larger sizes, this works correctly:

enter image description here

But when the browser is at a smaller width (or mobile), the columns split, and it ends up looking like this:

enter image description here

Is there any way to force the columns to stay together in a single row? There's plenty of room for both columns, even at the narrowest size.

Here's my HTML for a single row:

<div class="row">
   <div class="col-md-2"><i class="fa fa-check fa-2x fa-fw"></i></div>
   <div class="col-md-10">
      <p>Zero Day Protection</p>
   </div>
</div>

The CSS is standard bootstrap (the i class is a FontAwesome glyphicon).

gilly3 · Accepted Answer · 2015-06-16 22:26:24Z

Use the col-xs-* Grid classes.

<div class="row">
   <div class="col-xs-2"><i class="fa fa-check fa-2x fa-fw"></i></div>
   <div class="col-xs-10">
      <p>Zero Day Protection</p>
   </div>
</div>

In a bootstrap grid, your columns are all 100% wide by default. Use the col-<size>-<number> classes to override that. The <size> can be either xs, sm, md, or lg, and refers to the minimum screen width for that class to apply. The <number> is a number from 1 to 12 and refers to the number of columns wide your content should be.

So, maybe you have really wide content, and it should only be displayed side by side on desktop browsers. You could give your content class="col-md-6" and it would display side by side as long as the browser window is at least 992 pixels wide.

But, for you, since your content is really small, you want it always to display side by side, so you should use col-xs-<number> classes.

You could make it so that on mobile, you have one pair per line, but on tablets you have two per line, and on desktops you have 3 per line:

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
        <div class="col-xs-9 col-sm-4 col-md-3">
            <p>Adaptive Updates</p>
        </div>
        <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
        <div class="col-xs-9 col-sm-4 col-md-3">
            <p>Online Support and Knowledge Base</p>
        </div>
        <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
        <div class="col-xs-9 col-sm-4 col-md-3">
            <p>Direct Support</p>
        </div>
        <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
        <div class="col-xs-9 col-sm-4 col-md-3">
            <p>Enterprise Management Console</p>
        </div>
        <div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
        <div class="col-xs-9 col-sm-4 col-md-3">
            <p>Zero Day Protection</p>
        </div>
    </div>
</div>

See the bootstrap Grid System documentation for more detail.

Thanks for the very clear explanation. I've been studying the Bootstrap docs as hard as I could without understanding how the responsive column classes work and this cleared it up for me!

Deja Vu · Accepted Answer · 2015-06-16 22:03:20Z

2

class="col-md-2 col-xs-2" and class="col-md-10 col-xs-10"

You can combine classes for the element to make it behave certain way based on screen size. You can do something like class="col-md-2 col-xs-6" and class="col-md-10 col-xs-6" etc...

edited Jun 16, 2015 at 22:03

answered Jun 16, 2015 at 21:58

Deja Vu

7311 gold badge8 silver badges17 bronze badges

Collectives™ on Stack Overflow

Keep bootstrap columns in same row when changing size

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related