Bootstrap Centering

Utility for quick horizontal, vertical and both centering using CSS flex.

Torus Kit new features for Centering
Horizontal Vertical Both

Overview

This Torus Kit utility uses CSS flex and helps you to quickly center the element without needing to write a CSS code or use Bootstrap’s d-flex with corresponding .justify-content-center or .align-items-center utility classes. Just use center-{horizontal|vertical|both} and your done!

Horizontal

To horizontally center a content, wrap it into element with .center-h class.

Centered
<div class="center-h">
  <h5>Centered</h5>
</div>

Because .center-* utility is using CSS flex, sometimes you need to wrap all child elements into one wrapper in order to prevent elements to stretch to parent’s height.

For the inline elements, you can use .text-center.


Vertical

To vertically center a content, wrap it into element with .center-v class.

Centered
<div class="center-v">
  <h5>Centered</h5>
</div>

Both

It’s also possible to center elements in both direction with one .center-both class.

Centered
<div class="center-both">
  <h5>Centered</h5>
</div>