Bootstrap 3 .col-xs-offset-* doesn't work?

Solution 1:

Edit: as of Bootstrap 3.1 .col-xs-offset-* does exist, see bootstrap :: grid options

.col-xs-offset-* doesn't exist. Offset and column ordering are only for small and more. (ONLY .col-sm-offset-*, .col-md-offset-* and .col-lg-offset-*)

See the official documentation : bootstrap :: grid options

Solution 2:

Alternatively, you can add an empty div for the xs-offset (would save you having to manage the content in more than one place)

<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>

The bootstrap devs seem to be refusing to add those xs- ofsets and push/pull classes, see here: https://github.com/twbs/bootstrap/issues/9689

Solution 3:

You could get the offset set only for xs devises by negating the higher pixels with 0 offset. Like so,

class="col-xs-offset-1 col-md-offset-0"

Solution 4:

A suggestion for when you want to do an offset but find yourself incapable at extra small widths:

Use .hidden-xs and .visible-xs to make one version of your html block for extra small widths, and one for everything else (where you can still use an offset)

Example:

<div class="hero container">
  <div class="row">
    <div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
      <h2>This is a banner at the top of my site. It shows in everything except XS</h2>
      <p>Here are some supporting details about my banner.</p>
    </div>
    <div class="visible-xs col-xs-12">
      <h2 class="pull-right">This is my banner at XS width.</h2>
      <p class="pull-right">This is my supporting content at XS width.</p>
    </div>
  </div>
</div>

Solution 5:

col-md-offset-4 does not work if you manually apply margin to the same element. For example

In the above code, offset will not be applied. Instead a margin of 0 auto will be applied