2

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.

Documentation Code Sample

Code found in Bootsrap 1

Code found in Bootstrap 2

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?

Programming_Duders
  • 291
  • 2
  • 3
  • 14
  • Avoid bootstrap 4 till it is released for production , till then use Bootstrap 3.. – Dhaval Chheda May 25 '16 at 03:29
  • Though at least, I think this hasn't crossed the boundaries of bootstrap 4 though? What do you think? – Programming_Duders May 25 '16 at 03:31
  • They just change class name. Hey, it's under development. Try to add new issue to their [github](https://github.com/twbs/bootstrap) to update documentation. – vp_arth May 25 '16 at 04:34
  • Yes, edited immediately. :) – Programming_Duders May 25 '16 at 04:37
  • *I modified some code from the Bootstrap 4 manual itself.* never modified bootstrap code.. if you want to create your desired styles etc. create your custom style with your own class. That way you won't have problems using bootstrap classes when you want them to use as they are defined. – JF-Mechs May 25 '16 at 04:42
  • @JF-Mechs, I believe, `code from manual` was usage samples here. – vp_arth May 25 '16 at 04:45
  • @JF-Mechs: True, it was sample code from the manual that was meant to be tweaked with. By means, the only code I tweaked was the usage samples and not the bootstrap.css itself. :) – Programming_Duders May 25 '16 at 05:05

3 Answers3

3

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)

Community
  • 1
  • 1
Programming_Duders
  • 291
  • 2
  • 3
  • 14
3

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

pmichna
  • 4,800
  • 13
  • 53
  • 90
oroyo segun
  • 131
  • 1
  • 4
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).

Nate Conley
  • 11
  • 2
  • However, it can be seen here that the offset class, "col-md-offset-*" v4-alpha.getbootstrap.com/layout/grid. Picture of documentation updated to question. Docs were screenshot at the time of writing as posted too :) – Programming_Duders May 25 '16 at 13:33