Bootstrap: Offsetting columns is not working

[prashantweb]

I am using Boostrap 4 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 ?

[benThijssen]

Same issue here. This is what bootstrap says : "Updated the grid to drop push, pull, and offset in favor of new .order- modifiers and margin utilities." But I do not have a clue how to use .order- and margins as a replacement for offset-

[jipexu]

in this case i think probably must use flex utilities... ?
because here the (css) ml-md-2 give us a margin in rem ...

...the only way i found is to write more html : an empty div with col-md-2 we will have the offset task ...
because ml auto and mr auto complete to 12
ex : col-sm-6 ==> ml-auto will give 6 offset on the left (so work well if you want 1/11 2/10 10/2 11/1 .... but not for 2/4 4/2 1/6 6/1....)

perhaps an other way but i dont see ..

[prashantweb]

For now we can either use @jipexu 's solution by adding a blank div with whatever space we need.
like for my case a for offsetting 2 columns i added a blank

which will work like old offset.

Another way -
If you have another col-md-4 to the right of the first col-md-4 , then this would work to center both

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

[jipexu]

the best will be to have some "grided responsive" margin class will allow to define the size of the element and it's "grided responsive" marge in the same html element ... as the offset done before... or i miss something ?...

[mdo]

I dropped them from the alpha given all the flexbox and margin utilities we were adding. I'm happy to restore the offsets provided they're widely necessary.

[fran-worley]

@mdo we just need a way of controlling the size of the margin to match a grid. Either restoring the offset classes or converting them to a margin based name (ml-sm-col-2) would work, at the moment the margin utilities just aren't equivalent without some pretty ugly hacks.

[KristofMorva]

@fran-worley I agree, margin utils are just not replacements for offset classes. @mdo it'd be great to have them back, or have any other replacement solution.

[chrisblakley]

I'm also confused by the documentation on the new offset classes. I actually like the new order classes as that intuitively simplifies it, but I'm not sure I completely understand the new offset idea.

As far as I can tell, there is no way to create this grid without an extra, empty div or specifying the number of columns on the left div.

In my specific situation, I need to be able to control the offset via the right column div only. In the above example with the previous v4.alpha versions, I'd have an offset-md-1 class on the right div.

[PascalPixel]

@mdo I recommend leaving the utilities as you have them now in beta;

• offset classes in my experience greatly confuse first time bootstrappers who know flex box's automatic model (a block and a block and a block) and don't understand things like padding and margins (which offset classes are)
• using empty col's keeps the code clean especially with implicit flex box utilities without manual sizing
• the effects everyone want to achieve can be achieved with empty col's
• In the case of automatic centering, flex box utilities should be used

I think these are migration pains and need some good docs for how to move out of (or point to learn flex box)

[benThijssen]

• Offset-* shouldn't be confusing for newbies. offset-* follows the basic idea of the grid system, the most elementary part of bootstrap.
• Offset-* is the ideal mechanism for clean and straight-forwarded positioning within the grid system. Adding empty blocks for positioning is not clean coding.
• I agree with @superpencil's last remark about documentation.

[PascalPixel]

@benThijssen

• I've personally seen programmers with decades of experience repeatedly not understanding these grid systems, they are not intuitive due to the bells and whistles attached to them.
  
  
  
  • you have to apply a class for them to work
  
  
  • it has to add up to 12
  
  
  • they can have offset padding
  
  
  • but it still has to add up to 12
  
  
• In BS4, the grid is automated by having flex box do your layout.
• To new users this means that divs are objects and they get positioned automatically without bells and whistles
• empty divs would make sense here; because as soon as you apply a single offset, you'll also have to manually calculate all those measurements again to add up to 12 for all the other elements.
• I agree it's messy, but Bootstrap is to make things simple, and offsets are not simple from what I've seen, your experience seems to be different though...

[KristofMorva]

I haven't seen anyone struggling with the concept of offsets. In my opinion, empty divs are more like hacks, and should be avoided, just like the empty "clearfix" divs.

[chrisblakley]

Regardless if offset is confusing, that should not dictate whether or not the feature should be in Bootstrap.

If someone struggles to understand offset, then they could use empty divs if they need to. That hack should not be standard procedure for those who do understand offset. Empty divs is not an acceptable alternative for a grid framework.

[nunoarruda]

I've started using beta-1 today, this is the first thing I'm missing. Please bring grid-based offsetting back, they're very useful.

I would advise to stay away from the empty div alternative. The primary purpose of HTML should be to semantically wrap content. Using extra HTML to solely achieve a visual detail its a no-no, that's the job of CSS.

[jipexu]

yes i agree empty html tag are not the solution ... we know this ... but for now with beta is the only way to replace some offset lack ... but i think (hope) this will be in next release (with some offset or "responsive grided margin" ... by this we will have a very robust and complete (and finally simple) grid system ...

[Dannymx]

@mdo I think the offset columns should be brought back, now it's nearly impossible to have columns to move either direction by any amount of columns apart, some people has suggested to add empty columns to offset columns, but having empty elements seems like not an elegant solution.

[mdo]

PR is here: #23445

[BrianRabil]

Offset needs to be brought back. I'm building a site now using v4 and having a very difficult time achieving my desired layout. About to ditch Bootstrap for Foundation to be honest.

[meleyal]

Please also consider adding back the pull-* classes – they're very useful when working with layers that need to overlap.

[brunnopleffken]

Just my two cents: I'm missing the offset-* classes! After three major versions of Bootstrap using offsets, Foundation using offsets, removing it and replacing it by the not so intuitive ml- and mr- as a solution I consider a hasty decision.

The quickest way I found to get around the absence of offset is by adding empty DIVs. Definitely not good!

[mdo]

Please also consider adding back the pull-* classes – they're very useful when working with layers that need to overlap.

Interesting, hadn't thought of them that way. Probably not coming back anytime soon given order classes, but noted.

[meleyal]

@mdo fair enough. Here's the snippet I used to restore them:

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @for $i from 0 through $grid-columns {
      .pull#{$infix}-#{$i} {
        right: if($i > 0, percentage($i / $grid-columns), auto);
      }
    }
  }
}

[jsaves10]

For now we can either use @jipexu 's solution by adding a blank div with whatever space we need.
like for my case a for offsetting 2 columns i added a blank

which will work like old offset.
Another way -
If you have another col-md-4 to the right of the first col-md-4 , then this would work to center both

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

That is right and ml-auto worked for me. I wanted to center it so I did