Color utilities

Color utilities are used for changing colors for text, link and background.

Text colors

primary color

secondary color

dark color

gray color

light color

success color

warning color

error color

<span class="text-primary">primary color</span>
<span class="text-secondary">secondary color</span>
<span class="text-dark">dark color</span>
<span class="text-gray">gray color</span>
<span class="text-light">light color</span>
<span class="text-success">success color</span>
<span class="text-warning">warning color</span>
<span class="text-error">error color</span>
<a class="text-primary" href="#">primary color</a>
<a class="text-secondary" href="#">secondary color</a>
<a class="text-dark" href="#">dark color</a>
<a class="text-gray" href="#">gray color</a>
<a class="text-light" href="#">light color</a>
<a class="text-success" href="#">success color</a>
<a class="text-warning" href="#">warning color</a>
<a class="text-error" href="#">error color</a>

Background colors

primary bg

secondary bg

dark bg

gray bg

success bg

warning bg

error bg

<div class="bg-primary">primary bg</div>
<div class="bg-secondary">secondary bg</div>
<div class="bg-dark">dark bg</div>
<div class="bg-gray">gray bg</div>
<div class="bg-success">success bg</div>
<div class="bg-warning">warning bg</div>
<div class="bg-error">error bg</div>

Cursor utilities

Cursor utilities specify which mouse cursor to display when mouseover.

<!-- cursor: hand; -->
<div class="c-hand"></div>
<!-- cursor: move; -->
<div class="c-move"></div>
<!-- cursor: zoom-in; -->
<div class="c-zoom-in"></div>
<!-- cursor: zoom-out; -->
<div class="c-zoom-out"></div>
<!-- cursor: not-allowed; -->
<div class="c-not-allowed"></div>
<!-- cursor: auto; -->
<div class="c-auto"></div>

Display utilities

Display utilities are used for display and hidden things.

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


A Divider is used for separating elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
<!-- 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 class="divider-vert" data-content="OR"></div>
  <div class="column">
    <!-- column content -->


Loading indicator is used for loading or updating. You can add the loading class to a container for loading status.

Add the loading-lg class for large size.

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

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="relative"></div>
<div class="absolute"></div>
<div class="fixed"></div>
<!-- centered block -->
<div class="centered"></div>

<!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
<div class="m-1"></div>
<div class="m-2"></div>
<!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
<div class="mt-1"></div>
<div class="mt-2"></div>
<!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
<div class="mx-1"></div>
<div class="mx-2"></div>
<div class="my-1"></div>
<div class="my-2"></div>
<!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
<div class="p-1"></div>
<div class="p-2"></div>
<!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
<div class="pt-1"></div>
<div class="pt-2"></div>
<!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
<div class="px-1"></div>
<div class="px-2"></div>
<div class="py-1"></div>
<div class="py-2"></div>

Shape utilities

Shape utilities are used for change element shapes.

<!-- rounded element -->
<div class="s-rounded"></div>
<!-- circle element -->
<div class="s-circle"></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>