Utilities

Utility Classes

Use Bootstrap's extensive utility classes for spacing, typography, colors, and display properties.

Bootstrap Utilities

Bootstrap 5 provides hundreds of utility classes that let you style elements directly in HTML without writing custom CSS.

Spacing

Bootstrap uses a {property}{side}-{size} naming convention:

  • Properties: m (margin) or p (padding)
  • Sides: t top, b bottom, s start, e end, x horizontal, y vertical
  • Sizes: 0-5 and auto

Display and Flexbox

Use d-{value} for display and flex-*, justify-content-*, align-items-* for flexbox.

Colors and Typography

Built-in color system with semantic names: primary, secondary, success, danger, warning, info, light, dark

Example

html
<!-- Spacing utilities -->
<div class="mt-3 mb-5 px-4 py-2">Margin and padding</div>
<div class="m-auto" style="width: 200px">Centered block</div>
<div class="ms-auto">Push to the right</div>

<!-- Typography -->
<h1 class="display-1">Display heading</h1>
<p class="lead">Lead paragraph</p>
<p class="text-muted">Muted text</p>
<p class="fw-bold">Bold text</p>
<p class="fst-italic">Italic text</p>
<p class="text-uppercase">UPPERCASE</p>
<p class="text-truncate" style="width: 200px">Long text that gets truncated...</p>

<!-- Text alignment -->
<p class="text-start">Left</p>
<p class="text-center">Center</p>
<p class="text-end">Right</p>

<!-- Colors -->
<p class="text-primary">Primary color text</p>
<p class="text-success">Success text</p>
<div class="bg-danger text-white p-2">Red background</div>
<div class="bg-light border p-2">Light background</div>

<!-- Display -->
<div class="d-none d-md-block">Hidden on mobile, visible on md+</div>
<div class="d-flex justify-content-between align-items-center">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Borders and shadows -->
<div class="border border-primary rounded p-2">Bordered</div>
<div class="shadow-sm p-3">Light shadow</div>
<div class="rounded-pill px-3 py-1 bg-primary text-white">Pill badge</div>
Try it yourself — HTML