Offsetting Columns Is Not Working · Issue #23360 · Twbs/bootstrap

Skip to content Dismiss alert {{ message }} twbs / bootstrap Public

• Notifications You must be signed in to change notification settings
• Fork 78.9k
• Star 171k

• Code
• Issues 484
• Pull requests 164
• Discussions
• Actions
• Projects 3
• Security
• Insights

Additional navigation options

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom Offsetting columns is not working #23360 Closed prashantweb opened this issue Aug 12, 2017 · 23 comments Closed Offsetting columns is not working #23360 prashantweb opened this issue Aug 12, 2017 · 23 comments Labels css has-pr v4

Comments

Copy link

prashantweb commented Aug 12, 2017 • edited Loading

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 ?

👍 16 wallawe, virzak, nivhanin, YuvalPruss, chrisblakley, PascalPixel, TerryMooreII, stigok, skmedix, NikolayMurha, and 6 more reacted with thumbs up emoji All reactions

• 👍 16 reactions

Copy link

benThijssen commented Aug 12, 2017 • edited Loading

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-

All reactions Copy link Contributor

jipexu commented Aug 12, 2017 • edited Loading

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

All reactions XhmikosR added css v4 labels Aug 12, 2017 Copy link Author

prashantweb commented Aug 12, 2017

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>

👍 2 zanderwar and redolfosei reacted with thumbs up emoji All reactions

• 👍 2 reactions

Copy link Contributor

jipexu commented Aug 12, 2017 • edited Loading

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

All reactions Copy link Member

mdo commented Aug 13, 2017

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.

👍 16 benThijssen, Stiropor, chrisblakley, Cronkan, TerryMooreII, Berieau, smilledge, stigok, paulyoder, deadmanIsARabbit, and 6 more reacted with thumbs up emoji All reactions

• 👍 16 reactions

Copy link

fran-worley commented Aug 13, 2017 • edited Loading

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

👍 2 arechsteiner and LukeWJensen reacted with thumbs up emoji All reactions

• 👍 2 reactions

Copy link Contributor

KristofMorva commented Aug 13, 2017

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

👍 1 arechsteiner reacted with thumbs up emoji All reactions

• 👍 1 reaction

Copy link Contributor

chrisblakley commented Aug 14, 2017 • edited Loading

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.

All reactions Copy link Contributor

PascalPixel commented Aug 14, 2017 • edited Loading

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

All reactions dmolineus mentioned this issue Aug 14, 2017 Bootstrap 4 Beta1 - Drop offset classes contao-bootstrap/grid#2 Closed Copy link

benThijssen commented Aug 14, 2017

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.

👍 5 Cronkan, wallawe, bbugh, gthomas-appfolio, and irixzafra reacted with thumbs up emoji All reactions

• 👍 5 reactions

Copy link Contributor

PascalPixel commented Aug 14, 2017

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

All reactions Copy link Contributor

KristofMorva commented Aug 14, 2017

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.

👍 11 wallawe, TerryMooreII, MartinsLapsa, YuvalPruss, jnessier, nheath99, irixzafra, berzhy, nathan-charrois, membla, and xDestx reacted with thumbs up emoji All reactions

• 👍 11 reactions

Copy link Contributor

chrisblakley commented Aug 14, 2017

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.

👍 8 milenon, KristofMorva, Dannymx, smilledge, PascalPixel, tcmacdonald, doooby, and mdunnettstone reacted with thumbs up emoji All reactions

• 👍 8 reactions

Copy link Contributor

nunoarruda commented Aug 14, 2017

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.

👍 8 KristofMorva, Dannymx, tcmacdonald, brunnopleffken, nheath99, arechsteiner, berzhy, and membla reacted with thumbs up emoji 🎉 2 bbugh and jnessier reacted with hooray emoji All reactions

• 👍 8 reactions
• 🎉 2 reactions

Copy link Contributor

jipexu commented Aug 14, 2017

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

All reactions Copy link

Dannymx commented Aug 14, 2017

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

👍 1 arechsteiner reacted with thumbs up emoji All reactions

• 👍 1 reaction

mdo added a commit that referenced this issue Aug 15, 2017 Restore grid offset classes … 7ff1a15 Fixes #23360 by restoring just the offset class generation to our grid framework mixins. Also restores the `make-col-offset` mixin. Docs have been restored to illustrate this behavior and merged with the newer margin utilities examples. mdo mentioned this issue Aug 15, 2017 Restore grid offset classes #23445 Merged Copy link Member

mdo commented Aug 15, 2017

PR is here: #23445

👍 2 deadmanIsARabbit and wallawe reacted with thumbs up emoji 🎉 2 jnessier and smilledge reacted with hooray emoji All reactions

• 👍 2 reactions
• 🎉 2 reactions

mdo added the has-pr label Aug 15, 2017 Copy link

brianrabil commented Aug 16, 2017

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.

All reactions Copy link Contributor

meleyal commented Aug 17, 2017

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

All reactions Copy link

brunnopleffken commented Aug 18, 2017

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!

👍 2 bbugh and jnessier reacted with thumbs up emoji All reactions

• 👍 2 reactions

Copy link Member

mdo commented Aug 18, 2017

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.

All reactions mdo closed this as completed in #23445 Aug 20, 2017 mdo added a commit that referenced this issue Aug 20, 2017 Restore grid offset classes … fd8c052 Fixes #23360 by restoring just the offset class generation to our grid framework mixins. Also restores the `make-col-offset` mixin. Docs have been restored to illustrate this behavior and merged with the newer margin utilities examples. mdo mentioned this issue Aug 20, 2017 Beta 2 ship list #23278 Closed Copy link Contributor

meleyal commented Aug 22, 2017

@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); } } } }

All reactions jipexu mentioned this issue Oct 18, 2017 Insufficient documentation for column offsetting #24414 Closed Copy link

redolfosei commented Mar 18, 2019 • edited Loading

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

All reactions Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment Assignees No one assigned Labels css has-pr v4 Projects None yet Milestone No milestone Development

No branches or pull requests

15 participants You can’t perform that action at this time.