Home > Web Front-end > CSS Tutorial > How to Offset Columns in Bootstrap 4?

How to Offset Columns in Bootstrap 4?

Barbara Streisand
Release: 2024-11-07 10:34:03
Original
383 people have browsed it

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>
Copy after login
Copy after login
Copy after login

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>
Copy after login
Copy after login
Copy after login

Using .mx-auto for Centric Placement

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

<div>
Copy after login
Copy after login
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template