Utilities
Color utilities
Color utilities are used for changing colors for text, link and background.
Text colors
primary color
secondary 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-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-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.
c-hand
c-move
c-zoom-in
c-zoom-out
c-not-allowed
c-auto
<!-- 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>
Divider
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>
<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.
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
circle
<!-- rounded element -->
<div class="rounded"></div>
<!-- circle element -->
<div class="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>