Offsetting Columns Is Not Working (Bootstrap V4.0.0-Beta)

Offsetting columns is not working (Bootstrap v4.0.0-beta)

Bootstrap 4 offset classes were temporarily removed in Beta 1, but were restored in Beta 2.

The class names col-{breakpoint}-offset-* were replaced with offset-{breakpoint}-*

The new auto-margins also work for offsetting columns will move the column over as much as possible. So, it depends on how much you want to "push" the column to the right. If they're no other columns to the right of the col-md-4 it will go all the way if to right side of the row. ~~Basically offset was relevant for floated columns but is no longer relevant now that Bootstrap 4 is flexbox.~~

If you want to move the col-md-4 over just 2 column units, the best way would be to use a dummy/placeholder column...

<div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-4">
            ..
      </div>
</div>

https://www.codeply.com/go/SqrQIOAY7

If there are other col-md-4 to the right of the first, then ml-auto and mr-auto would work to center both columns...

<div class="row">
        <div class="col-md-4 ml-auto">
            .
        </div>
        <div class="col-md-4 mr-auto">
            .
        </div>
</div>

https://www.codeply.com/go/SqrQIOAY7n

If you want to center the col-md-4 then simply use mx-auto to create equal margins on both sides.

Note: specific column offsets will be restored as of Beta 2

Offsetting columns in Bootstrap v4

I know this is not pretty, but since Bootstrap v4-beta took the offsetting by number out of the game, you can add an empty column before and making it however many columns you want to offset the next one.

[class*="col-"] {  background-color: #eee;}.row {  background-color: #f9f9f9;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">  <div class="row">    <div class="col-sm-3"></div>    <div class="col-sm-2">      .col-sm-2 offseted by 3 columns    </div>  </div></div>

Bootstrap v4.0 New method for offsetting columns

I'm trying to get this: <div class="col-md-10 col-md-offset-2"></div>

In Bootstrap v4 you can achieve it by applying col-md-10 for a width of 10 columns, and ml-md-auto to "skip" the space on the left (which is exactly a width of 2 columns as one row is 12 columns):

.row {    background: red;}
.row > div {    background: yellow;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">    <div class="row">        <div class="col-md-10 ml-md-auto">md-10 offset-2</div>    </div></div>

Bootstrap col-md-offset-* not working

I would not recommend utilizing the Grid system in this instance, as much as simply adding an increased padding for each <h2>. That being said, the way you would achieve this using col-*-offset-* would be as follows:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>One</h2>
            </div>

            <div class="col-md-11 col-md-offset-1">
                <h2>Two</h2>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <h2>Three</h2>
            </div>
        </div>
    </div>
</div>

Essentially the first line must span the entire row (so -12). The second line must be offset by 1 column, so you offset by 1 and give it a total width of 11 columns (11+1 = 12) and so forth. Your offset is always enough to ensure that the total column count equals 12.

Offsetting Columns Is Not Working (Bootstrap V4.0.0-Beta)