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

[adtserapio]

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/

[SharkyKZ]

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

[adtserapio]

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

[hebbet]

with the next alpha, they will update the docs.

[adtserapio]

Thanks for the reassurance 👍

[mohdsafeernk]

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

[frontenddevTS]

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

[helvecio]

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!

[kkj930]

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]

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

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

[xeroxism]

offset-* works well in B4

[cre8ivetech]

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

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

[phazei]

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.

[jackdhamu]

anybody can explain offset concept

[helvecio]

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