What does offset do in Bootstrap 4?

Question

I'm following a webpage creation tutorial, and the instructor created a division with the class .col-sm-offset-1. What does this do to the content within the div with that class? Here's the complete code:

<div class = "col-sm-10 col-sm-offset-1">

https://jsfiddle.net/zmtmphtq/

Answer 1

Basically col-sm-offset-1 will leave amount of space on left and main content put towards right

you can also do this by giving margin-left also...

Answer 2

In Bootstrap 3 col-*-offset-* will work to offset (move to the right) the column, but in Bootstrap 4 this has been changed to offset-*-1, so the markup would be:

<div class="col-sm-10 offset-sm-1">

http://www.codeply.com/go/sbruTFHL6q

Answer 3

As per bootstrap 4.0 .offset class is available.

1. Use class .offset See bootstrap offset documentaion

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

2. Or use class .mr (margin-right) .ml (mrgin-left), See bootstrap spacing documentaion

`<div class="row">
   <div class="col-4 mr-5">col-4</div>
   <div class="col-4 ml-5">col-4</div>
</div>`

3. Or create a empty column as big as you want the offset to be

`<div class="row">
  <div class="col-4"></div>
  <div class="col">col-4</div>
 </div>`

4. Or use .mr-auto to offset the next column

`<div class="row">
    <div class="col-4 mr-auto">col-4</div>
    <div class="col-4">col-4</div>
 </div>`

See the code in this codepen

Note: Bootstrap Alpha v4 does not have the .offset class, Make sure to use Bootstrap 4.0.

Answer 4

you also have to remember to use the offset offset-* function with the same grid you make use of. e.g <div class="col-lg-2 col-md-6 text-center offset-lg-1"> some text here</div> or <div class="col-sm-2 col-md-6 text-center offset-sm-1"> some text here</div> so as to keep the code clean

Answer 5

Inaddition to@Morris you can also center the main column with .mx-auto so you don't need to use mr-auto and ml-auto together.

As said above in bootstrap 3 col offset was used to simulate a column so you don't need to create an empty col.

Answer 6

Actually "offset-1" will leave space of one column on left and make main content towards right, but you can also achieved this by giving "mr" or "margin-right"

Answer 7

mr-auto or ml-auto

Did the trick!

Answer 8

In Bootstrap v4 you can use offset-sm-1 like:

<div class="col-sm-10 offset-sm-1">...</div>