I'm relatively new to Bootstrap 4.
Recently, I embarked on learning Bootstrap 4 but unfortunately, I've run into some issues already. I attempted to modify code directly from the Bootstrap 4 manual itself and encountered a problem with the offset feature not functioning correctly. The code itself is quite straightforward and doesn't involve extensive coding.
UPDATE: MAY 25, 2016 [12:35 PM (GMT+8)]:
When using Boootrap 3.3.6 release, col-md-offset-* functions properly. However, in Bootstrap 4, it fails.
The issue has been reported at https://github.com/twbs/bootstrap/issues/19966!
This is the code snippet 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>
Upon inspecting the Bootstrap file through Safari's web inspector and examining the CDN link, I discovered that there was no class called "col-md-offset-*", leading me to believe this functionality might be nonexistent in Bootstrap. Instead, I found the class md-offset-4, which worked similarly to the example in Bootstrap.
UPDATE: MAY 25, 2016 [9:03 PM (GMT+8)]:
In response to user Nate Conley's input, this information was sourced from at the time of editing. Any alterations made by the Bootstrap team remain uncertain at the time of writing.
https://i.sstatic.net/8bEHW.png
https://i.sstatic.net/adlPX.png
https://i.sstatic.net/XU58M.png
Ultimately, after modifying the code, everything now works flawlessly.
<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>