How to Achieve Vertical Alignment in Bootstrap 4?

Vertical Alignment in Bootstrap 4

Aligning elements like text elements in Bootstrap 4 can be frustrating. Normally, the text-align utility can only be used for horizontal alignment, and most vertical alignment techniques are usually implemented by adding additional markup and overriding the default style.

flex-xs-middle class

Older versions of Bootstrap (such as Bootstrap 3 and earlier versions of Bootstrap 4) use the flex-xs-middle class to vertically center elements . This class can be added to a container to vertically center its content using flexbox:

<div class="container-fluid">
    <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>
    <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>
</div>

Bootstrap 4.0.0 Updates

As of Bootstrap 4.0.0, flexbox become the default setting. Therefore, it is now possible to align elements vertically by using several methods:

auto-margins

The my-auto utility can be used to automatically center elements vertically, for example:

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

flexbox

flexbox Utilities, such as align-self-center, can be used to align a single column or all columns in an entire row, for example:

<div class="row">
    <div class="col-6 align-self-center">
        <div class="card card-block">Center</div>
    </div>
    <div class="col-6">
        <div class="card card-inverse card-danger">Taller</div>
    </div>
</div>

Display Utilities

Bootstrap 4 also comes with a set of display utilities that can be used as an alternative to vertical alignment, for example:

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

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