Utilities
Alignment, spacing, colors, display and other time-saving helper classes.
Live demo
Text and background colors
primary, success, danger, warning, muted bg-primary bg-success bg-danger bg-warning
Text alignment
.text-center
.text-right
Spacing (mt-*, mb-*, px-*, py-*)
.p-3
.p-2
.px-4 .py-2
.mt-2
Display and border
.d-none .d-md-inline-block
.rounded
.shadow
Code
<div class="bg-primary text-white p-3 rounded">
<p class="text-center text-uppercase">Utilities</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="text-success font-weight-bold">Left</span>
<button class="btn btn-sm btn-outline-dark mt-3">Button</button>
</div>Tip: spacing utilities use 0-5 steps (0, .25rem, .5rem, 1rem, 1.5rem, 3rem).