How to Offset Columns in Bootstrap 4?

Bootstrap 4 Column Offsetting Techniques

Bootstrap 4 introduces updated techniques for offsetting columns. The previous method of using "offset-md-*" classes has been removed in Beta 1.

Introducing .ml-auto and .mr-auto

The new approach utilizes ".ml-auto" and ".mr-auto" classes. These classes automatically adjust margins to push columns to the left or right within a row.

Custom Offsets Using Dummy Columns

To achieve custom column offsets, a "dummy" column placeholder can be used. For example, to offset a "col-md-4" column by 2 units, use:

<div>

Centering Columns with .ml-auto and .mr-auto

To center two adjacent "col-md-4" columns, apply ".ml-auto" to the left column and ".mr-auto" to the right column:

<div>

Using .mx-auto for Centric Placement

To center a "col-md-4" column, apply ".mx-auto":

<div>

Note: Specific column offsets will be restored in Bootstrap 4 Beta 2.

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