---

name: bootstrap-utilities description: This skill should be used when the user asks about Bootstrap utilities, Bootstrap spacing utilities, Bootstrap margin utilities, Bootstrap padding utilities, Bootstrap display utilities, Bootstrap flex utilities, Bootstrap text utilities, Bootstrap color utilities, Bootstrap background utilities, Bootstrap border utilities, Bootstrap shadow utilities, Bootstrap sizing utilities, Bootstrap position utilities, Bootstrap visibility utilities, Bootstrap overflow utilities, Bootstrap opacity utilities, Bootstrap float utilities, Bootstrap vertical align utilities, Bootstrap link utilities, or needs help with Bootstrap utility classes.

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-)

Copy<!-- 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

Responsive Spacing

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

Gap Utilities (Flexbox/Grid)

Copy<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

Copy<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

Copy<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

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

Decoration

Copy<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

Copy<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

Copy<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

Copy<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

Copy<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

Copy<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

Copy<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

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

Flex Wrap

Copy<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

Copy<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

Copy<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

Copy<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

Copy<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

Copy<!-- 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

Copy<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

Copy<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

Copy<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

Copy<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

Copy<!-- 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

Copy<!-- 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

Copy<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

Copy<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

Copy<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

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

Z-Index Utilities

Copy<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

Copy<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

Copy<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.

Copy<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>

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.

Copy<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>

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.

Copy<!-- 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>

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:

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

Adding Custom Utilities

Copy@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

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

Removing Utilities

Copy// 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)

Copy<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

Copy<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

Copy<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

Copy<!-- 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

Copy<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

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

Additional Resources

Reference Files

• references/utilities-reference.md - Complete utility class reference
• references/api-customization.md - Advanced Sass customization examples

Example Files

• examples/card-layout.html - Card styling with spacing, shadows, and borders
• examples/responsive-utilities.html - Responsive display and spacing patterns
• examples/flex-centering.html - Flexbox centering techniques