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!

bootstrap if for while auto using class finally this column bug issue mr

Statement：

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

Previous article：How Can I Achieve Box Shadow Compatibility in IE7 and IE8?Next article：How Can I Achieve Box Shadow Compatibility in IE7 and IE8?

Related articles

See more

• Summary of six implementation methods of JSDOMReady event
• Examples of CSS implementation of various column layouts on the page
• Pure CSS3 full-screen responsive slideshow effects
• Pure CSS3 cool colorful 3D button style
• Stunning CSS3 hexagonal menu animation effects