is it wrong for bootstrap3 columns to add up to less than 12? (or, understanding -offset)

Question

Short version: is col-x-offset-n applied only to the left, or does it apply to left and right if this is what it needs to make 12? For instance can I just do "col-x-10 col-x-offset-1" to get a 10 column container with 1 extra column on both left and right? It seems to work but this isn't what the documentation suggests should happen.

Longer version: As an example, I'm trying to center a div using bootstrap 3 grid system. At col-xs size I want it to be full width, but above that I want it centered with a little more padding on each side. All docs of course say that the number of columns should total 12. So if I do:

 <div class="container">
    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-10">
            ...content here...
        </div>
        <div class="col-sm-1">
        </div>
    </div>
</div>

it works as I expect with the two empty col-sm-1 columns acting like padding on the left and right. But I can do it with less markup using -offset:

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
        <div class="col-sm-1">
        </div>
    </div>
</div>

As the bootstrap docs say: "Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns." So in this case I have 10 columns, plus 1 column in the offset, plus 1 column in the following empty col-sm-1 div, equals 12 columns.

Now for the question finally: if I remove the final empty col-sm-1 div I still get the same result (page is centered as with both examples before), but my columns now only add up to 11.

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
    </div>
</div>

Is this okay to do? Is Bootstrap just filling in the last column for me? I would like to just drop it and use only "col-sm-10 col-sm-offset-1" or "col-sm-8 col-sm-offset-2" or "col-sm-6 col-sm-offset-3" (even though these only add up to 11,10,and 9 total columns respectively), but is this really the way to do it or is it just a quirk that it works out okay? It almost seems like bootstrap applies the offset to both left and right if it needs to, but I can't find any documentation to confirm that.

(And maybe with this simple example there is an easier way to do what I describe here, but I'm trying to understand how -offset works, not to just center a simple div with margin: 0 auto; or something like that.)

Answer 1

In the bootstrap documentation they provide examples which do not add up to 12.

This should be acceptable:

<div class="container">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
        ...content here...
        </div>
    </div>
</div>

For reference http://getbootstrap.com/css/#grid go to the "offsetting columns" chapter and the last example adds up to 9, and is a similar center example.

<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>