Offsets

The .offset-* class is used to offset colums. The offset sizes are sized to match the colum sizes exactly in terms of mergin, padding and width.

The rules for offsets are similar to those for columns: apply .offset-* or .offset-{breakpoint}-* classes, and specify the desired percentage, represented as a fraction of 12 units. For instance, in the following scenario, a .col-6 element has an offset of 3, achieved with the .offset-3 class.

    <div class="container text-center">
        <div class="row">
            <div class="offset-3 col-6">
                Column
            </div>
        </div>
    </div>
    
    

In some cases, you might need to reset the offset manually, as this applies from the specified breakpoint upwords and you might only need the offset for one specific breakpoint. YOu can use .offset-{breakpoint}-0 to remove a breakpoit.

    <div class="container text-center">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12">
                Column
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                Column
            </div>
            <div class="offset-lg-0 col-lg-4 
                offset-md-3 col-md-6 col-sm-12">
                Column
            </div>
        </div>
    </div>
    
    

In the above example, the .col-md-6 was offset by 3 units so it is centered on the second row. As the .offset-md-3 is applied upwards even thouigh not needed in this case, it has been removed using .offset-lg-0.

Note that the above behavior can also be achieved with justify-content-center. More information on content justification will be provided in the Utilities/ Flex section.