Bootstrap 4 Accepting Offset-md-*, But Not Col-offset-md, Among Other ...

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 Bootstrap 4 accepting offset-md-*, but not col-offset-md, among other grid system classes #19966 Closed adtserapio opened this issue May 25, 2016 · 15 comments Closed Bootstrap 4 accepting offset-md-*, but not col-offset-md, among other grid system classes #19966 adtserapio opened this issue May 25, 2016 · 15 comments Labels docs v4

Comments

Copy link

adtserapio commented May 25, 2016 • edited Loading

When I use the Boootrap 3.3.6 release, col-md-offset-* is working fine. However, in Bootrap 4, it in results failure. Upon checking and checking, the naming conventions are apparently changed, as I checked it in the bootsrap.css file linked to it via maxcdn. It works when I use: offset-md-* as the one I found in the CSS file. In the documentation though, it still says to use col-md-offset. Also, it's not just in offset-md, also occurs in pull, push in the various grid sizes too: I also posted the question on Stack Overflow http://stackoverflow.com/questions/37427245/bootstrap-4-accepting-offset-md-instead-col-offset-md-naming-convention-bug/

👍 3 wall-e-08, NibyP, and oruku37 reacted with thumbs up emoji All reactions

• 👍 3 reactions

adtserapio changed the title Bootstrap 4 accepting offset-md-*, but not col-offset-md Bootstrap 4 accepting offset-md-*, but not col-offset-md, among other grid system classes May 25, 2016 Copy link

SharkyKZ commented May 25, 2016 • edited Loading

This is intentional. Whatever documentation you're reading is outdated. See here https://github.com/twbs/bootstrap/blob/v4-dev/docs/examples/grid/index.html#L156 https://github.com/twbs/bootstrap/blob/v4-dev/docs/layout/grid.md

👍 3 adtserapio, josemanosalvas, and yansenkeler reacted with thumbs up emoji 👎 5 kimdah3, danbirle, wall-e-08, DylanDelobel, and JasiekDrozd reacted with thumbs down emoji All reactions

• 👍 3 reactions
• 👎 5 reactions

Copy link Author

adtserapio commented May 25, 2016

Thank you. However, this was taken from http://v4-alpha.getbootstrap.com/layout/grid/ as of the moment of writing. Well sir, I guess the docs must be updated. :)

👍 5 sanpoChew, chauhanmanik, kenji-1996, Rupeshiya, and selvakumar-macapp reacted with thumbs up emoji All reactions

• 👍 5 reactions

Copy link Contributor

hebbet commented May 25, 2016

with the next alpha, they will update the docs.

👍 1 adtserapio reacted with thumbs up emoji All reactions

• 👍 1 reaction

Copy link Author

adtserapio commented May 25, 2016

Thanks for the reassurance 👍

All reactions cvrebert added docs v4 labels May 25, 2016 cvrebert closed this as completed May 25, 2016 Copy link

mohdsafeernk commented Jul 24, 2017

In bootsratp version 4 col-xs/sm/md/lg-offset-* wont work. Please use simply offset-* ex: offset-2

👍 12 channimol, wall-e-08, xeroxism, madebycollins, M-Abdullahi, sophiatay, alekhyaAppsbrew, sivaprasadreddy, mrg-develop, shrestaz, and 2 more reacted with thumbs up emoji 🎉 2 taynarasene and sophiatay reacted with hooray emoji ❤️ 3 xeroxism, taynarasene, and sophiatay reacted with heart emoji All reactions

• 👍 12 reactions
• 🎉 2 reactions
• ❤️ 3 reactions

Copy link

frontenddevTS commented Aug 29, 2017 • edited Loading

Bootstrap-4 removed "col-offset-*", for more details see Bootstrap-4 document -> "Offsetting columns"!

👍 1 tapin13 reacted with thumbs up emoji All reactions

• 👍 1 reaction

Copy link

helvecio commented Aug 29, 2017

It took me a while to understand how to use the new offsetting system in B4. The documentation lacks enough information as I am not acquainted with Flexbox. It turns out to be simple though. I'm used to creating layouts with 10 columns, thus I'm used to offsetting by one the first column. This is how it is done in B4: Note that ml-md-auto (ml stands for margin left) now is needed to offset the left column by one. And mr-md-auto (mr stands for margin right) is required to offset column 2 to the left by one. Now, start playing with it!

👍 15 heronrs, guanabara, xR86, sasa-b, xiaoluo2017, Jeiwan, FelipeLopez-Uni, XiaojunWu94, ianarsenault, codeSachin, and 5 more reacted with thumbs up emoji All reactions

• 👍 15 reactions

Copy link

kkj930 commented Sep 2, 2017 • edited Loading

Hmm @helvecio , I agree the documentation lacks a bit of extra explanation. I also use a 10 column layout, but used justify-content-center on the wrapping row, like this: <div class="row justify-content-center"> <div class="col-8">.col-8</div> <div class="col-2">.col-2</div> </div> No need to use the margin classes in such case then. I'm not sure what the advantages/drawbacks are for one over the other. I guess if you want different behaviour for different screen sizes, you might have to play around with the specific cols + margins.

All reactions Copy link

helvecio commented Sep 2, 2017

@kkj930 I usually want my columns to stack when the layout is displayed in a smaller screen. With your solution, it remains side by side.

All reactions Copy link

wadmoy commented Apr 2, 2018

The col-push-* and col-pull-* classes are included in the Bootstrap4 Extension: http://bootstrap-extension.com/

All reactions Copy link

xeroxism commented Jun 27, 2018

offset-* works well in B4

All reactions Copy link

cre8ivetech commented Jul 15, 2018 • edited Loading

In Bootstrap3: To offset columns: col-*-offset-* Example, col-sm-offset-4. In Bootstrap4: To offset columns: offset-*-* Example, offset-sm-0

👍 5 Sptandi, AmericanWebbery, kevinjohnobrien, ReeganExE, and proghasan reacted with thumbs up emoji All reactions

• 👍 5 reactions

Copy link

phazei commented Oct 31, 2018 • edited Loading

offset-*-* works, but it doesn't override the m*-* classes. For example: <div class="col-8 mx-sm-auto col-sm-4 offset-md-3 col-md-5"> That doesn't actually offset-md-3 at md because the m*-* is !important.

All reactions Copy link

jackdhamu commented Apr 17, 2019

anybody can explain offset concept

👍 1 cnuchowdary reacted with thumbs up emoji All reactions

• 👍 1 reaction

Copy link

helvecio commented Apr 23, 2019

Offsetting columns is a way to be more creative and positioning your content areas. Remember Bootstrap uses a 12-column grid. Say you want a centered 6-column layout (C). If you create a col-4 you get: C C C C C C X X X X X X To center your 6 columns, add a 4-column offset (A). A A A A C C C C X X X X

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 docs v4 Projects None yet Milestone No milestone Development

No branches or pull requests

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