Offset columns in Bootstrap

The offset works like a blank column that will stay before your column. For example, if you want a column that will have half of the size of the screen and will be exactly in the middle, you will have to do:

<div class="col-sm-6 col-sm-offset-3"></div>

A full row has 12 columns. This way you will have 6 columns (half of the row) and a offset of 3 columns. It will be exactly in the middle of the screen.

Take a look on Bootstrap documentation.

The above doesn't work for me as I think the bootstrap classes have changed slightly.

<div class="col-md-4 offset-md-2">

Does work for me.

Hope this helps

Dave

In Bootstrap 3, like this..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

http://www.codeply.com/go/7wofwfzrH3

In Bootstrap 4, like this..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 offset-sm-2"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

https://www.codeply.com/go/t5DTGwero8

I am using bootstrap 3. Below code is worked for me to shift div right.

<div class="col-lg-4 offset-lg-4"></div>