bootstrap: Offsetting columns is not working

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 ?

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 16
  • Comments: 23 (15 by maintainers)

Commits related to this issue

Most upvoted comments

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.

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.

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.

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.

  • 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.

PR is here: #23445

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 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.

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 <div class="col-md-2"></div> 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>

@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.

@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.