Alignment

This helper helps to control the text alignment.

Usage #

Superkube has several classes for specifying text horizontal and vertical alignment.

  • align-left
  • align-center
  • align-right
  • align-top
  • align-middle
  • align-baseline
  • align-bottom

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

<p class="align-left">...</p>
<p class="align-center">...</p>
<p class="align-right">...</p>

The alignment classes can be mixed with other components, modules or submodules inside them.

<div class="card align-center">
    <div class="card-head">...</div>
    <div class="card-body">...</div>
</div>

Responsive #

To change the behavior on small screens, just add the suffix -sm.

Lorem ipsum dolor sit amet...

<p class="align-center align-left-sm">...</p>