Center Column Bootstrap 4/5 Tricks

Uncategorized / Leave a Comment

Center Column Bootstrap in both 4/5 versions. There are three ways to center a column with/without a container. By using these Bootstrap col/grid center tricks we can align any content at the center like text, images, and more.

Bootstrap .Offset Class
It only works for even column sizes, so only .col-2, .col-4, .col-6, .col-8, and .col-10 are supported.

Bootstrap .mx-auto Class
.mx-auto means (auto x-axis margins)

Bootstrap justify-content-md-center class
The justify-content-md-center class is used for centering all inner columns in the outer div row.

HTML

<!-- By using .Offset class -->
<div class="row">
    <div class="col-4 offset-4 bg-warning">
        <h2>.Offset class</h2>
    </div>
</div>


<!-- By using .mx-auto class -->
<div class="row">
    <div class="col-4 mx-auto bg-light">
        <h2>.mx-auto class</h2>
    </div>
</div>


<!-- By using justify-content-md-center class -->
<div class="row justify-content-md-center">
    <div class="col-2 bg-info">
        justify-content-md-center
    </div>
    <div class="col-sm-3 bg-light">
        justify-content-md-center
    </div>
    <div class="col-md-4 bg-info">
        justify-content-md-center
    </div>
</div>

Must Read