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><p>For centering two <strong>col-md-4</strong> columns, the combination of <strong>ml-auto</strong> and <strong>mr-auto</strong> can be utilized:</p>
<pre class="brush:php;toolbar:false"><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!

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055523 fails to install in Windows 11?

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1664

14

CakePHP Tutorial

1421

52

Laravel Tutorial

1315

25

PHP Tutorial

1266

29

C# Tutorial

1239

24

Show More