How to Achieve Custom Column Offsets in Bootstrap 4 Beta?

Bootstrap Column Offsetting Not Functioning: A Resolution

In Bootstrap 4 Beta, column offsetting has seemingly become a cause for concern for developers. The previously used offset-md-* classes have been eliminated per the documentation. However, this issue has been temporarily resolved in Beta 2, bringing back the familiar offset classes.

However, in Beta 1, a novel approach to column offsetting was introduced using the .ml-auto class. While this method can indeed displace a col-md-4 column, it effectuates an offset of four columns. This is not what most developers are seeking; they desire customized offsets like the erstwhile

.

Using

as a substitute proved ineffective. Therefore, is this a bug, or is there a viable workaround?

Fortunately, the issue has been rectified with the restoration of offset classes. Nevertheless, the new auto-margins introduced in Beta 1 can still be employed for column offsetting. These margins will shift the column as far to the right as possible. Consequently, the amount of offsetting depends on the available space. If there are no other columns to the right of col-md-4, it will occupy the entire right side of the row.

Alternative Solutions

Alternatively, you can implement a dummy column to achieve a two-column offset:

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

For centering two col-md-4 columns, the combination of ml-auto and mr-auto can be utilized:

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

Finally, to center a single col-md-4 column, simply use mx-auto for equal margins on both sides:

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

Note: The specific column offset classes will be reintroduced in Beta 2.

The above is the detailed content of How to Achieve Custom Column Offsets in Bootstrap 4 Beta?. For more information, please follow other related articles on the PHP Chinese website!