← Superkube / Documentation 2.1.1


This module helps to center an element horizontally if its maximum width is set.

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="container-4 uncentered bg-platinum my-block-centered"></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>