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:

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

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).

Answer 1

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.

Answer 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...