Column Offsetting

Column offsets let you push columns to the right by a specified number of columns, creating empty space.

Basic Offset

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        Centred column (4 wide, offset by 4)
    </div>
</div>

The offset adds empty space equal to the specified number of columns before the element.

Offset Classes

col-xs-offset-*   (extra small screens)
col-sm-offset-*   (small screens)
col-md-offset-*   (medium screens)
col-lg-offset-*   (large screens)

Examples

<!-- Centre a 6-wide column -->
<div class="row">
    <div class="col-md-6 col-md-offset-3">Centred</div>
</div>

<!-- Push column to the right -->
<div class="row">
    <div class="col-md-4">Left</div>
    <div class="col-md-4 col-md-offset-4">Right-aligned</div>
</div>

<!-- Three columns with spacing -->
<div class="row">
    <div class="col-md-3 col-md-offset-1">A</div>
    <div class="col-md-3 col-md-offset-1">B</div>
    <div class="col-md-3">C</div>
</div>

Centering Content

The most common use of offsets is centring content:

<!-- Centre a login form -->
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h2>Login</h2>
            <form>
                <!-- form fields -->
            </form>
        </div>
    </div>
</div>

Resetting Offsets

<!-- Offset on medium, no offset on small -->
<div class="col-sm-6 col-md-4 col-md-offset-2 col-sm-offset-0">
    Responsive offset
</div>