Bootstrap 4 accepting offset-md-*, instead col-off

Question

I'm just a beginner in Bootstrap 4.

I just started learning it recently and sadly, I have been encountering problems already. I modified some code from the Bootstrap 4 manual itself. However, it fails miserably, with the offset not working properly. The code is perfectly simple and doesn't require a lot of code though.

EDIT: MAY 25, 2016 [12:35 PM (GMT+8)]:

Using Boootrap 3.3.6 release, col-md-offset-* is working. However, it is in Bootrap 4 that has failure.

Issue has been posted on https://github.com/twbs/bootstrap/issues/19966!

This is the code I used:

 <!-- This contains the .red, .blue and .green classes -->
 <style> ... </style>

 <div class="container">
    <div class="row">

       <div class="col-md-4 red">
         Hello world
       </div>

       <div class="col-md-4 col-offset-md-4 green">
         Hello world
       </div> 

        <div class="col-md-4 col-offset-md-4 blue">
         Hello world
       </div> 

   </div>

---

So, I doubted that there is in fact a class in bootstrap called "col-md-offset-*" as it fails to work. So, in Safari, I opened Develop > Show Web Inspector and took a look at the Bootstrap file that is linked via CDN. I searched for the class col-md-offset-4, and it didn't appear. However, I saw md-offset-4 instead. I also saw that instead of the class col-md-push-4, all I found is md-push-4 and so on and so forth. Therefore, I instead used the md-push-4 and it worked as good as the example in Bootstrap.

EDIT: MAY 25, 2016 [9:03 PM (GMT+8)]:

This addresses answer by user Nate Conley. By the way, this was taken from http://v4-alpha.getbootstrap.com/layout/grid/ as of the time this question was edited. Any change of the Bootstrap team is unforeseen or unknown at this time of writing.

Therefore, I modified the code and it works perfectly fine.

<style> ... </style>    


<div class="container">
    <div class="row">

       <div class="col-md-4 red">
         Hello world
       </div>

       <div class="col-md-4 offset-md-4 green">
         Hello world
       </div> 

        <div class="col-md-4 offset-md-4  blue">
         Hello world
       </div> 

   </div>

Q: Is the problem with my browser, Safari (9.1), or with Bootstrap version 4, maxcdn, etc.? Is this a normal bug in Bootstrap 4?

Answer 1

The Bootstrap 4 docs do correctly state that the offset class is .offset-md-*. To the best of my understanding, Bootstrap 4 is not going to be backwards compatible. I personally think that dropping the .col- makes it a bit easier to read, and is less typing (4 characters, but I'll take it).

Answer 2

Using Boootrap 3.3.6 release, col-md-offset-* is working. However, it is in Bootrap 4 that has failure.

As seen on an issue I posted, as recommend by user vp_arth here, in the Bootstrap 4 Development Repository in Github. The Bootsrap v4 documentation of the grid system, as of the moment has not yet applied the edited one from github, which can be accessed through these links:

a) Bootstrap Layout grid.md file

b) Examples of using the Grid System

Simple Answer: There is nothing wrong with the Safari Browser, nor the CDN, nor the Bootsrap v4 itself, but in fact the outdated docs as of the time of writing. It will updated in the next alpha. More information can be seen in the closed issue thread I posted in here :)

(9:30 PM GMT+8)

Answer 3

instead of col-offset-* use ml-*-auto to push the succeeding column