Offsetting columns is not working (Bootstrap v4.0.0-beta)

Question

I am using Boostrap 4(Bootstrap v4.0.0-beta) Beta and facing issues with offsetting columns. Earlier i used to do offset-md-* and it was working, with BS4 Beta this is removed according to docs. The new method mentioned in docs is using .ml-auto , when i try to use it with col-md-4 it is offsetting 4 columns. What i want is custom offsetting like

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

I tried using

**<div class="col-md-4 ml-md-2"></div>** 

but didn't work Is this is bug or there is another way to do it ?

Here is official docs about offsetting https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Answer 1

Bootstrap 4 offset classes were temporarily removed in Beta 1, but were restored in Beta 2.

The class names col-{breakpoint}-offset-* were replaced with offset-{breakpoint}-*

The new auto-margins also work for offsetting columns will move the column over as much as possible. So, it depends on how much you want to "push" the column to the right. If they're no other columns to the right of the col-md-4 it will go all the way if to right side of the row. Basically offset was relevant for floated columns but is no longer relevant now that Bootstrap 4 is flexbox.

If you want to move the col-md-4 over just 2 column units, the best way would be to use a dummy/placeholder column...

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

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

If there are other col-md-4 to the right of the first, then ml-auto and mr-auto would work to center both columns...

<div class="row">         <div class="col-md-4 ml-auto">             .         </div>         <div class="col-md-4 mr-auto">             .         </div> </div> 

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

If you want to center the col-md-4 then simply use mx-auto to create equal margins on both sides.

---

Note: specific column offsets will be restored as of Beta 2

Answer 2

Changing

offset-md-2 

to:

col-md-offset-2 

Worked for me