Why Are My Bootstrap 4 Columns Vertically Aligned Instead of Horizontally?

Bootstrap 4 Column Alignment Inconsistencies

In the transition from Bootstrap 3 to 4, you've noticed that your columns are vertically aligned instead of horizontally. This can be attributed to a change in the grid system in Bootstrap 4.

Col-12 Issue

In Bootstrap 3, you could wrap columns within a parent row using the class "col-12". This is no longer valid in Bootstrap 4. Each level of nesting has its own row, so remove the "col-12" class from the parent row:

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

This will ensure that the columns are aligned horizontally and maintain their expected behavior. For more information on nesting in Bootstrap, refer to their official documentation: https://getbootstrap.com/docs/4.0/layout/grid/#nesting

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