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!