How to Fix Vertical Column Alignment Issues When Migrating from Bootstrap 3 to Bootstrap 4?

Bootstrap 3 to Bootstrap 4: Vertical Column Alignment Resolved

In transitioning from Bootstrap 3 to 4, you may encounter a vertical alignment issue in your columns. This occurs because Bootstrap 4 introduced a structural change in how nested columns are handled.

To rectify this issue and restore horizontal column alignment, it is essential to remove the col-12 class that surrounds your nested columns. Bootstrap 4 requires a new row for nesting, as explained in the documentation:

"If you used .col-xs-* in Bootstrap 3, be sure to use .row in Bootstrap 4, as nesting columns without a row will cause problems."

Revised Code:

<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>

Additionally, this can be verified using JavaScript Fiddle:

https://jsfiddle.net/aq9Laaew/4791/

The above is the detailed content of How to Fix Vertical Column Alignment Issues When Migrating from Bootstrap 3 to Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!