Centered

Usage #

If an element has a specified width, it can be centered horizontally with the centered class.

<div class="container-4 centered bg-platinum"></div>

If the element is already centered, for example, it is specified in the properties of the custom class. Then it can be modified with the uncentered class.

<div class="my-centered-block container-4 bg-platinum uncentered"></div>

Responsive #

To change the centering behavior on small screens, you can use centering classes with the -sm suffix.

In the example below, the element will become uncentered on small screens.

<div class="w-50 centered uncentered-sm bg-platinum"></div>

In the example below, the element will become centered on small screens.

<div class="w-50 centered-sm bg-platinum"></div>