Bootstrap 5.3 Utilities

Bootstrap provides extensive utility classes for rapid styling without custom CSS. These are generated via the Utilities API and can be customized.

Spacing Utilities

Margin (m-) and Padding (p-)

<!-- All sides -->
<div class="m-3">Margin 1rem all sides</div>
<div class="p-3">Padding 1rem all sides</div>

<!-- Specific sides -->
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left in LTR)</div>
<div class="me-3">Margin end (right in LTR)</div>
<div class="mx-3">Margin horizontal (left + right)</div>
<div class="my-3">Margin vertical (top + bottom)</div>

<!-- Same pattern for padding: pt-, pb-, ps-, pe-, px-, py- -->
<div class="px-3 py-2">Horizontal padding 1rem, vertical 0.5rem</div>

Spacing Scale

| Class | Size | |-------|------| | {m\|p}-0 | 0 | | {m\|p}-1 | 0.25rem (4px) | | {m\|p}-2 | 0.5rem (8px) | | {m\|p}-3 | 1rem (16px) | | {m\|p}-4 | 1.5rem (24px) | | {m\|p}-5 | 3rem (48px) | | {m\|p}-auto | auto (margin only) |

Responsive Spacing

<div class="mt-0 mt-md-3 mt-lg-5">
  No margin, 1rem on md, 3rem on lg+
</div>

Gap Utilities (Flexbox/Grid)

<div class="d-flex gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="d-grid gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
</div>

<!-- Row and column gaps -->
<div class="d-grid gap-0 row-gap-3 column-gap-3">...</div>

Display Utilities

<div class="d-none">Hidden</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-block">Block</div>
<div class="d-flex">Flexbox</div>
<div class="d-inline-flex">Inline flex</div>
<div class="d-grid">Grid</div>
<div class="d-table">Table</div>
<div class="d-table-row">Table row</div>
<div class="d-table-cell">Table cell</div>

<!-- Responsive display -->
<div class="d-none d-md-block">Hidden on xs/sm, block on md+</div>
<div class="d-block d-lg-none">Visible until lg</div>

<!-- Print display -->
<div class="d-print-none">Hidden in print</div>
<div class="d-none d-print-block">Only visible in print</div>

Text Utilities

Alignment

<p class="text-start">Left aligned (start)</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned (end)</p>

<!-- Responsive alignment -->
<p class="text-start text-md-center text-lg-end">
  Left on xs/sm, center on md, right on lg+
</p>

Transform

<p class="text-lowercase">lowercased text</p>
<p class="text-uppercase">UPPERCASED TEXT</p>
<p class="text-capitalize">Capitalized Text</p>

Decoration

<a href="#" class="text-decoration-none">No underline</a>
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Strikethrough text</p>

Wrapping and Overflow

<div class="text-wrap">Text that wraps normally</div>
<div class="text-nowrap">Text that won't wrap</div>
<p class="text-break">Longwordthatwillbreaktopreventoverflow</p>
<p class="text-truncate" style="max-width: 150px;">
  This text is truncated with ellipsis...
</p>

Font Weight and Style

<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text (relative)</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-medium">Medium text</p>
<p class="fw-normal">Normal weight</p>
<p class="fw-light">Light text</p>
<p class="fw-lighter">Lighter text (relative)</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style</p>

Line Height

<p class="lh-1">Line height 1</p>
<p class="lh-sm">Small line height</p>
<p class="lh-base">Base line height</p>
<p class="lh-lg">Large line height</p>

Flexbox Utilities

Direction

<div class="d-flex flex-row">Horizontal</div>
<div class="d-flex flex-row-reverse">Horizontal reversed</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>

Justify Content

<div class="d-flex justify-content-start">Start</div>
<div class="d-flex justify-content-end">End</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>
<div class="d-flex justify-content-evenly">Space evenly</div>

Align Items

<div class="d-flex align-items-start">Top</div>
<div class="d-flex align-items-end">Bottom</div>
<div class="d-flex align-items-center">Center</div>
<div class="d-flex align-items-baseline">Baseline</div>
<div class="d-flex align-items-stretch">Stretch</div>

Align Self

<div class="align-self-start">Top</div>
<div class="align-self-center">Center</div>
<div class="align-self-end">Bottom</div>

Flex Wrap

<div class="d-flex flex-wrap">Wrap</div>
<div class="d-flex flex-nowrap">No wrap</div>
<div class="d-flex flex-wrap-reverse">Wrap reverse</div>

Flex Grow/Shrink

<div class="flex-grow-0">Don't grow</div>
<div class="flex-grow-1">Grow to fill</div>
<div class="flex-shrink-0">Don't shrink</div>
<div class="flex-shrink-1">Can shrink</div>
<div class="flex-fill">Fill available space</div>

Order

<div class="order-0">First</div>
<div class="order-1">Second</div>
<div class="order-2">Third</div>
<div class="order-first">Very first (-1)</div>
<div class="order-last">Very last (6)</div>

Background Utilities

<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-success">Success</div>
<div class="bg-danger">Danger</div>
<div class="bg-warning">Warning</div>
<div class="bg-info">Info</div>
<div class="bg-light">Light</div>
<div class="bg-dark">Dark</div>
<div class="bg-body">Body</div>
<div class="bg-body-secondary">Body secondary</div>
<div class="bg-body-tertiary">Body tertiary</div>
<div class="bg-white">White</div>
<div class="bg-black">Black</div>
<div class="bg-transparent">Transparent</div>

<!-- Opacity -->
<div class="bg-primary bg-opacity-75">75%</div>
<div class="bg-primary bg-opacity-50">50%</div>
<div class="bg-primary bg-opacity-25">25%</div>
<div class="bg-primary bg-opacity-10">10%</div>

<!-- Gradient -->
<div class="bg-primary bg-gradient">Gradient</div>

Text Color Utilities

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-muted">Muted text</p>
<p class="text-body">Body text</p>
<p class="text-body-secondary">Body secondary</p>
<p class="text-body-tertiary">Body tertiary</p>
<p class="text-body-emphasis">Body emphasis</p>
<p class="text-black">Black text</p>
<p class="text-white bg-dark">White text</p>

<!-- Opacity -->
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>

Border Utilities

<!-- Add borders -->
<div class="border">All sides</div>
<div class="border-top">Top</div>
<div class="border-end">End</div>
<div class="border-bottom">Bottom</div>
<div class="border-start">Start</div>

<!-- Remove borders -->
<div class="border-0">No border</div>
<div class="border-top-0">No top border</div>

<!-- Border color -->
<div class="border border-primary">Primary</div>
<div class="border border-success">Success</div>
<div class="border border-danger">Danger</div>

<!-- Border width -->
<div class="border border-1">1px</div>
<div class="border border-2">2px</div>
<div class="border border-3">3px</div>
<div class="border border-4">4px</div>
<div class="border border-5">5px</div>

<!-- Border radius -->
<div class="rounded">Rounded</div>
<div class="rounded-0">No radius</div>
<div class="rounded-1">Small radius</div>
<div class="rounded-2">Default radius</div>
<div class="rounded-3">Large radius</div>
<div class="rounded-4">XL radius</div>
<div class="rounded-5">XXL radius</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill</div>
<div class="rounded-top">Top only</div>
<div class="rounded-end">End only</div>
<div class="rounded-bottom">Bottom only</div>
<div class="rounded-start">Start only</div>

Shadow Utilities

<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>

Sizing Utilities

Width

<div class="w-25">25% width</div>
<div class="w-50">50% width</div>
<div class="w-75">75% width</div>
<div class="w-100">100% width</div>
<div class="w-auto">Auto width</div>
<div class="mw-100">Max-width 100%</div>
<div class="vw-100">100vw</div>
<div class="min-vw-100">Min 100vw</div>

Height

<div class="h-25">25% height</div>
<div class="h-50">50% height</div>
<div class="h-75">75% height</div>
<div class="h-100">100% height</div>
<div class="h-auto">Auto height</div>
<div class="mh-100">Max-height 100%</div>
<div class="vh-100">100vh</div>
<div class="min-vh-100">Min 100vh</div>

Position Utilities

Position Values

<div class="position-static">Static (default)</div>
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>

Placement

<!-- Edge positioning (0%, 50%, 100%) -->
<div class="position-absolute top-0 start-0">Top left</div>
<div class="position-absolute top-0 end-0">Top right</div>
<div class="position-absolute bottom-0 start-0">Bottom left</div>
<div class="position-absolute bottom-0 end-0">Bottom right</div>
<div class="position-absolute top-50 start-50">Center (needs transform)</div>

Centering with Translate

<!-- Center an element -->
<div class="position-absolute top-50 start-50 translate-middle">
  Perfectly centered
</div>

<!-- Center horizontally only -->
<div class="position-absolute start-50 translate-middle-x">
  Horizontally centered
</div>

<!-- Center vertically only -->
<div class="position-absolute top-50 translate-middle-y">
  Vertically centered
</div>

Common Pattern: Badge Positioning

<button class="btn btn-primary position-relative">
  Notifications
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

Overflow Utilities

<div class="overflow-auto">Auto</div>
<div class="overflow-hidden">Hidden</div>
<div class="overflow-visible">Visible</div>
<div class="overflow-scroll">Scroll</div>

<div class="overflow-x-auto">Horizontal auto</div>
<div class="overflow-x-hidden">Horizontal hidden</div>
<div class="overflow-y-auto">Vertical auto</div>
<div class="overflow-y-hidden">Vertical hidden</div>

Opacity Utilities

<div class="opacity-100">100%</div>
<div class="opacity-75">75%</div>
<div class="opacity-50">50%</div>
<div class="opacity-25">25%</div>
<div class="opacity-0">0%</div>

Visibility Utilities

<div class="visible">Visible</div>
<div class="invisible">Invisible (takes space)</div>

Z-Index Utilities

<div class="z-n1">-1</div>
<div class="z-0">0</div>
<div class="z-1">1</div>
<div class="z-2">2</div>
<div class="z-3">3</div>

Object Fit Utilities

<img class="object-fit-contain" src="...">
<img class="object-fit-cover" src="...">
<img class="object-fit-fill" src="...">
<img class="object-fit-scale" src="...">
<img class="object-fit-none" src="...">

Interaction Utilities

<div class="user-select-all">Select all on click</div>
<div class="user-select-auto">Default selection</div>
<div class="user-select-none">Cannot select</div>
<div class="pe-none">Pointer events none</div>
<div class="pe-auto">Pointer events auto</div>

Float Utilities

Float utilities position elements to the left or right of their container, allowing text to wrap around them.

<div class="float-start">Float start (left in LTR)</div>
<div class="float-end">Float end (right in LTR)</div>
<div class="float-none">No float</div>

<!-- Responsive floats -->
<div class="float-sm-start">Float start on sm+</div>
<div class="float-md-end">Float end on md+</div>
<div class="float-lg-none">No float on lg+</div>

| Class | Description | |-------|-------------| | float-start | Float left (LTR) | | float-end | Float right (LTR) | | float-none | Remove float |

Responsive: float-{breakpoint}-{start|end|none}

Note: Modern layouts typically use flexbox or grid instead of floats. Floats remain useful for wrapping text around images.

Vertical Align Utilities

Control vertical alignment of inline, inline-block, inline-table, and table cell elements.

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

| Class | Alignment | |-------|-----------| | align-baseline | Baseline (default) | | align-top | Top of line | | align-middle | Middle of line | | align-bottom | Bottom of line | | align-text-top | Top of parent's font | | align-text-bottom | Bottom of parent's font |

Note: These work on inline/inline-block elements and table cells, not block elements. For block vertical alignment, use flexbox (align-items-*).

Link Utilities

Style links with opacity, underline color, offset, and hover effects. Added in Bootstrap 5.3.

<!-- Link opacity -->
<a href="#" class="link-opacity-10">10% opacity</a>
<a href="#" class="link-opacity-25">25% opacity</a>
<a href="#" class="link-opacity-50">50% opacity</a>
<a href="#" class="link-opacity-75">75% opacity</a>
<a href="#" class="link-opacity-100">100% opacity</a>

<!-- Hover opacity -->
<a href="#" class="link-opacity-50-hover">50% on hover</a>

<!-- Underline color -->
<a href="#" class="link-underline-primary">Primary underline</a>
<a href="#" class="link-underline-secondary">Secondary underline</a>
<a href="#" class="link-underline-success">Success underline</a>

<!-- Underline offset -->
<a href="#" class="link-offset-1">1 offset</a>
<a href="#" class="link-offset-2">2 offset</a>
<a href="#" class="link-offset-3">3 offset</a>

<!-- Underline opacity -->
<a href="#" class="link-underline-opacity-0">No underline</a>
<a href="#" class="link-underline-opacity-25">25% underline</a>
<a href="#" class="link-underline-opacity-50">50% underline</a>

<!-- Combined styling -->
<a href="#" class="link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
  Styled link
</a>

| Class | Description | |-------|-------------| | link-opacity-{10\|25\|50\|75\|100} | Link text opacity | | link-opacity-{value}-hover | Opacity on hover | | link-underline-{color} | Underline color | | link-offset-{1\|2\|3} | Underline distance | | link-underline-opacity-{0\|10\|25\|50\|75\|100} | Underline opacity |

Utilities API

Bootstrap's utilities are generated via a Sass-based API, allowing full customization.

API Structure

Each utility is defined as a map with these key options:

| Option | Description | |--------|-------------| | property | CSS property name (required) | | values | List or map of values (required) | | class | Custom class prefix (optional) | | responsive | Generate responsive variants (default: false) | | print | Generate print variants (default: false) | | state | Generate state variants like :hover | | css-var | Output as CSS variables instead of rules | | css-variable-name | Custom CSS variable name (with css-var) | | local-vars | Map of local CSS variables | | rfs | Enable fluid rescaling (default: false) | | rtl | Include in RTL output (default: true) |

Note: All utilities include !important by default. Disable globally with $enable-important-utilities: false.

Adding Custom Utilities

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab grabbing not-allowed
    )
  )
);

@import "bootstrap/scss/utilities/api";

Modifying Existing Utilities

// Add responsive variants to an existing utility
$utilities: map-merge(
  $utilities,
  (
    "overflow": map-merge(
      map-get($utilities, "overflow"),
      (responsive: true)
    )
  )
);

Removing Utilities

// Remove entirely
$utilities: map-remove($utilities, "float");

// Or set to null
$utilities: map-merge($utilities, ("float": null));

Common Patterns

Frequently-used utility combinations for real-world scenarios.

Centered Container (Full Viewport)

<div class="d-flex justify-content-center align-items-center min-vh-100">
  <div class="text-center">
    <h1>Perfectly Centered</h1>
    <p>Both horizontally and vertically</p>
  </div>
</div>

Sticky Footer Layout

<div class="d-flex flex-column min-vh-100">
  <header class="bg-dark text-white p-3">Header</header>
  <main class="flex-grow-1 p-3">Main content</main>
  <footer class="bg-body-secondary p-3">Footer stays at bottom</footer>
</div>

Card with Spacing and Shadow

<div class="card shadow-sm border-0 rounded-3">
  <div class="card-body p-4">
    <h5 class="card-title mb-3">Title</h5>
    <p class="card-text text-muted mb-0">Content</p>
  </div>
</div>

Responsive Hide/Show

<!-- Hidden on mobile, visible on desktop -->
<div class="d-none d-md-block">Desktop only</div>

<!-- Visible on mobile, hidden on desktop -->
<div class="d-block d-md-none">Mobile only</div>

Icon + Text Alignment

<div class="d-flex align-items-center gap-2">
  <svg>...</svg>
  <span>Text aligned with icon</span>
</div>

When to Use Utilities vs Custom CSS

| Scenario | Recommended Approach | |----------|---------------------| | One-off spacing adjustment | Utility classes (mt-3, p-4) | | Consistent component styling | Custom component class | | Responsive show/hide | Display utilities (d-none d-md-block) | | Complex hover/focus states | Custom CSS | | Values not in Bootstrap scale | Extend via Utilities API or custom CSS | | Repeated pattern (3+ times) | Extract to custom class | | Quick prototype | Utilities for speed | | Production component | Consider extracting repeated utilities |

Rule of thumb: If you're applying the same combination of 4+ utilities to multiple elements, consider creating a custom class.