How to Achieve Desired Column Offsets in Bootstrap 4.0.0-beta?

Patricia Arquette
Release: 2024-11-09 08:26:02
Original
634 people have browsed it

How to Achieve Desired Column Offsets in Bootstrap 4.0.0-beta?

Bootstrap Column Offsetting Dilemma Resolved

In Bootstrap v4.0.0-beta, the previously utilized offset-md-* classes for column offsets have been removed. The documentation suggests employing .ml-auto instead. However, this approach results in unexpected behavior, offsetting columns by four instead of the intended amount.

The discrepancy arises from the new flexbox-based layout system in Bootstrap 4. Offset classes are no longer relevant due to the flexibility of columns. To achieve custom offsets, consider the following solutions:

  1. Placeholder Column:

    • Add a dummy column of the desired offset size to create space for your offset column.
  2. Auto Margins (ml/mr-auto):

    • Center multiple columns: Divide your offset column by two and apply ml-auto and mr-auto to each column.
    • Center a single column: Use mx-auto to create equal margins on both sides.

Upcoming Changes:
It's important to note that specific column offsets will be reintroduced in Beta 2 of Bootstrap 4. This will restore the ability to use classes like offset-md-2 to achieve precise column displacement.

The above is the detailed content of How to Achieve Desired Column Offsets in Bootstrap 4.0.0-beta?. 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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!