Position utilities

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

<!-- clear float -->
<div class="clearfix"></div>
<!-- float: left and right -->
<div class="float-left"></div>
<div class="float-right"></div>
<!-- position: relative, absolute and fixed -->
<div class="rel"></div>
<div class="abs"></div>
<div class="fixed"></div>
<!-- centered block -->
<div class="centered"></div>
<!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; -->
<div class="mt-10"></div>
<div class="mt-5"></div>
<!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; -->
<div class="pt-10"></div>
<div class="pt-5"></div>

Display utilities

Display utilities are used for display and hidden things.

<!-- display: block; -->
<div class="block"></div>
<!-- display: inline; -->
<div class="inline"></div>
<!-- display: inline-block; -->
<div class="inline-block"></div>
<!-- display: flex; -->
<div class="flex"></div>
<!-- display: inline-flex; -->
<div class="inline-flex"></div>
<!-- display: none; -->
<div class="hide"></div>
<!-- visibility: visible; -->
<div class="visible"></div>
<!-- visibility: hidden; -->
<div class="invisible"></div>
<!-- hide text contents -->
<div class="text-hide"></div>
<!-- assistive text for screen reader -->
<div class="text-assistive"></div>

Text utilities

Text utilities are used for text alignment, styles and overflow things.

<!-- left-aligned text -->
<div class="text-left"></div>
<!-- center-aligned text -->
<div class="text-center"></div>
<!-- right-aligned text -->
<div class="text-right"></div>
<!-- justified text -->
<div class="text-justify"></div>

<!-- Lowercased text -->
<div class="text-lowercase"></div>
<!-- Uppercased text -->
<div class="text-uppercase"></div>
<!-- Capitalized text -->
<div class="text-capitalize"></div>

<!-- Normal weight text -->
<div class="text-normal"></div>
<!-- Bold text -->
<div class="text-bold"></div>
<!-- Italicized text -->
<div class="text-italic"></div>
<!-- Larger text (120%) -->
<div class="text-large"></div>

<!-- Overflow behavior: display an ellipsis to represent clipped text -->
<div class="text-ellipsis"></div>
<!-- Overflow behavior: truncate the text -->
<div class="text-clip"></div>
<!-- Text may be broken at arbitrary points -->
<div class="text-break"></div>

Shape utilities

Shape utilities are used for change element shapes.

<!-- rounded element -->
<div class="rounded"></div>
<!-- circle element -->
<div class="circle"></div>

Divider

A Divider is used for separating elements.

<!-- divider element -->
<div class="divider"></div>
<!-- divider element with text -->
<div class="divider text-center" data-content="OR"></div>

<!-- vertical divider element with text -->
<div class="columns">
  <div class="column">
    <!-- column content -->
  </div>
  <div class="divider-vert" data-content="OR"></div>
  <div class="column">
    <!-- column content -->
  </div>
</div>

Loading

Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status.

<!-- loading element -->
<div class="loading"></div>