What is the use of col-*-offset-0 in bootstrap?

Question

I know that adding an offset greater than 0 is visible when using it on a div tag. But what is the purpose of offset-0 if it doesn't add anything tangible?

Answer 1

But what is the purpose of offset-0?

One word: Overriding.

You can use that class to override previous offsets. The actual rule for this class is quite simple:

margin-left: 0;

If you have a look at the official Bootstrap documentation it says:

You can also override offsets from lower grid tiers with .col-*-offset-0 classes.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

---

Demo

In this demo, the blue <div> has the following extra classes:

• col-xs-offset-3 which means that devices of size xs and above will get an offset equal to 3. In css this means margin-left: 25%.
• col-xs-offset-0 which means that devices of size sm and above will get an offset equal to 0. In css this means margin-left: 0.

So if you want an offset only for xs devices you need to override this with the offset 0 for anything sm and above.

.row div div {
  background: red;
  height: 50px;
}
.row div:last-of-type div {
  background: blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-6 col-sm-4">
    <div></div>
  </div>
  <div class="col-xs-6 col-sm-4">
    <div></div>
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
    <div></div>
  </div>
</div>

_{Snippet best viewed in "Full page" mode and then resize viewport to see changes.}