Why Are My Columns Vertically Aligned in Bootstrap 4 After Upgrading From Bootstrap 3?

Bootstrap 3 to Bootstrap 4: Vertically Aligned Columns

When upgrading from Bootstrap 3 to Bootstrap 4, some users may encounter a problem where their columns are vertically aligned instead of horizontally.

The Cause:

Bootstrap 4 requires a new row for nested columns. The older col-12 class, which spanned the entire row, is no longer needed.

The Solution:

To fix this issue, remove the col-12 class from the parent row.

Example:

<div class="row">
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
</div>

See the difference in this updated JS Fiddle:

https://jsfiddle.net/aq9Laaew/4792/

By removing the col-12 class, the columns will now align horizontally as expected.

The above is the detailed content of Why Are My Columns Vertically Aligned in Bootstrap 4 After Upgrading From Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!