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.

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

Bootstrap 4 accepting offset-md-*, but not col-offset-md, among other grid system classes #19966

Closed
Pilipino opened this Issue May 25, 2016 · 12 comments

Comments

Projects
None yet
@Pilipino

Pilipino commented May 25, 2016

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.

screen shot 2016-05-25 at 11 14 11 am

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:

screen shot 2016-05-25 at 11 17 41 am

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/

@Pilipino Pilipino changed the title from Bootstrap 4 accepting offset-md-*, but not col-offset-md to Bootstrap 4 accepting offset-md-*, but not col-offset-md, among other grid system classes May 25, 2016

@SharkyKZ

This comment has been minimized.

Show comment
Hide comment

SharkyKZ commented May 25, 2016

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

@Pilipino

This comment has been minimized.

Show comment
Hide comment
@Pilipino

Pilipino May 25, 2016

Thank you. However, this was taken from http://v4-alpha.getbootstrap.com/layout/grid/ as of the moment of writing.

screen shot 2016-05-25 at 8 58 00 pm

Well sir, I guess the docs must be updated. :)

Thank you. However, this was taken from http://v4-alpha.getbootstrap.com/layout/grid/ as of the moment of writing.

screen shot 2016-05-25 at 8 58 00 pm

Well sir, I guess the docs must be updated. :)

@hebbet

This comment has been minimized.

Show comment
Hide comment
@hebbet

hebbet May 25, 2016

Contributor

with the next alpha, they will update the docs.

Contributor

hebbet commented May 25, 2016

with the next alpha, they will update the docs.

@Pilipino

This comment has been minimized.

Show comment
Hide comment
@Pilipino

Pilipino May 25, 2016

Thanks for the reassurance 👍

Thanks for the reassurance 👍

@cvrebert cvrebert added docs v4 labels May 25, 2016

@cvrebert cvrebert closed this May 25, 2016

@mohdsafeernk

This comment has been minimized.

Show comment
Hide comment
@mohdsafeernk

mohdsafeernk Jul 24, 2017

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

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

@frontenddevTS

This comment has been minimized.

Show comment
Hide comment
@frontenddevTS

frontenddevTS Aug 29, 2017

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

frontenddevTS commented Aug 29, 2017

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

@helvecio

This comment has been minimized.

Show comment
Hide comment
@helvecio

helvecio 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:
captura de tela 2017-08-29 as 10 45 36
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!

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:
captura de tela 2017-08-29 as 10 45 36
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!

@kkj930

This comment has been minimized.

Show comment
Hide comment
@kkj930

kkj930 Sep 2, 2017

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.

kkj930 commented Sep 2, 2017

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.

@helvecio

This comment has been minimized.

Show comment
Hide comment
@helvecio

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

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.

@wadmoy

This comment has been minimized.

Show comment
Hide comment
@wadmoy

wadmoy Apr 2, 2018

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

wadmoy commented Apr 2, 2018

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

@xeroxism

This comment has been minimized.

Show comment
Hide comment
@xeroxism

xeroxism Jun 27, 2018

offset-* works well in B4

offset-* works well in B4

@cre8ivetech

This comment has been minimized.

Show comment
Hide comment
@cre8ivetech

cre8ivetech Jul 15, 2018

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

In Bootstrap4: To offset columns: offset-*-*
Example, offset-sm-0

cre8ivetech commented Jul 15, 2018

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

In Bootstrap4: To offset columns: offset-*-*
Example, offset-sm-0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment