How to Vertically Center Content in Bootstrap 4?

Vertical Alignment in Bootstrap 4

Issue Introduction

In Bootstrap 4, the vertical alignment of certain elements can be challenging. A common difficulty arises when attempting to vertically center content within a row, particularly the element containing the text "Supplier."

Solution Overview

Bootstrap 4 introduces several methods for vertical alignment, including flexbox utilities, auto-margins, and display utilities.

Flexbox Approach

Bootstrap 4 Alpha 5 and Earlier:

<div class="row">
    <div class="col-xs-6">
        <div class="circle-medium backgrounds"></div>
    </div>
    <div class="col-xs-6 flex-xs-middle">
        <div class="name">Supplier</div>
    </div>
</div>

Bootstrap 4 Stable:

<div class="row">
    <div class="col-sm-12 align-self-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Bootstrap 4 Flexbox by Default:

<div class="row">
    <div class="col-sm-12 d-flex align-items-center justify-content-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Auto-Margins Approach

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Display Utilities Approach

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            Supplier
        </div>
    </div>
</div>

Conclusion

These methods provide various options for vertically aligning elements in Bootstrap 4. Remember to choose the approach that best suits your specific requirements and browser compatibility considerations.

The above is the detailed content of How to Vertically Center Content in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!