Bootstrap 5 Utility Classes

Bootstrap 5 utility classes are a set of predefined CSS classes that allow you to quickly apply common styles and layout options to your HTML elements without writing custom CSS.

Here's a consolidated version of the Bootstrap 5 utility classes with explanations and examples:

Text Utilities

Text utilities help you control the alignment, transformation, size, and appearance of text elements.

• text-start, text-center, text-end: Align text to the start, center, or end of its container.

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

• text-lowercase, text-uppercase, text-capitalize: Transform text to lowercase, uppercase, or capitalize the first letter of each word.

  <p class="text-lowercase">Lowercased Text</p>
  <p class="text-uppercase">Uppercased Text</p>
  <p class="text-capitalize">Capitalized Text</p>

• fs-1 to fs-6: Set the font size using predefined classes.

  <p class="fs-1">Largest font size</p>
  <p class="fs-3">Medium font size</p>
  <p class="fs-6">Smallest font size</p>

• fw-bold, fw-normal, fw-light: Adjust the font weight to bold, normal, or light.

  <p class="fw-bold">Bold text</p>
  <p class="fw-normal">Normal text</p>
  <p class="fw-light">Light text</p>

• fst-italic, fst-normal: Set the font style to italic or normal.

  <p class="fst-italic">Italic text</p>
  <p class="fst-normal">Normal text</p>

• lh-1, lh-sm, lh-base, lh-lg: Set the line height of an element.

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

• text-wrap, text-nowrap: Control the wrapping behavior of text within an element.

  <p class="text-wrap">This text will wrap onto multiple lines if needed.</p>
  <p class="text-nowrap">This text will never wrap onto multiple lines.</p>

• text-break: Break long words and URLs onto multiple lines to prevent overflow.

  <p class="text-break">https://www.example.com/long-url-that-might-overflow</p>

• text-decoration-none, text-decoration-underline, text-decoration-line-through: Control the text decoration of an element.

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

• font-monospace: Set the font family of an element to a monospace font.

  <p class="font-monospace">Monospace text</p>

• text-reset: Reset the color and text decoration of an element to inherit from its parent.

  <div class="text-muted">
  <a href="#" class="text-reset">Link with inherited color</a>
  </div>

• text-muted, text-primary, text-success, etc.: Apply contextual text colors.

  <p class="text-muted">Muted text</p>
  <p class="text-primary">Primary text</p>
  <p class="text-success">Success text</p>

Spacing Utilities

Spacing utilities allow you to control the margin and padding of elements.

• m-*, p-*: Apply margin or padding to an element. Replace * with a value from 0 to 5 or auto.

  <div class="m-3">Element with margin on all sides</div>
  <div class="p-2">Element with padding on all sides</div>

• mt-*, mb-*, ms-*, me-*, mx-*, my-*: Apply margin to specific sides of an element.

  <div class="mt-3">Element with top margin</div>
  <div class="mb-2">Element with bottom margin</div>
  <div class="mx-auto">Element centered horizontally</div>

• pt-*, pb-*, ps-*, pe-*, px-*, py-*: Apply padding to specific sides of an element.

  <div class="pt-3">Element with top padding</div>
  <div class="pb-2">Element with bottom padding</div>
  <div class="px-4">Element with horizontal padding</div>

• ms-auto, me-auto, mt-auto, mb-auto: Push an element to the right, left, top, or bottom of its container.

  <div class="d-flex">
  <div class="ms-auto">Element pushed to the right</div>
  </div>

Flex Utilities

Flex utilities allow you to create flexible layouts and control the alignment and distribution of elements within a flex container.

• d-flex, d-inline-flex: Create a flex container.

  <div class="d-flex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  </div>

• flex-row, flex-column, flex-row-reverse, flex-column-reverse: Define the direction of flex items.

  <div class="d-flex flex-row">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  </div>
  <div class="d-flex flex-column">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  </div>

• justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around, justify-content-evenly: Align flex items along the main axis.

  <div class="d-flex justify-content-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  </div>

• align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch: Align flex items along the cross axis.

  <div class="d-flex align-items-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  </div>

• flex-fill: Allow a flex item to grow and fill the available space within its flex container.

  <div class="d-flex">
  <div>Flex item 1</div>
  <div class="flex-fill">Flex item 2 (grows to fill space)</div>
  <div>Flex item 3</div>
  </div>

• flex-grow-*, flex-shrink-*: Adjust the ability of flex items to grow or shrink.

  <div class="d-flex">
  <div class="flex-grow-1">Flex item 1 (grows)</div>
  <div>Flex item 2</div>
  <div class="flex-shrink-0">Flex item 3 (doesn't shrink)</div>
  </div>

• flex-nowrap, flex-wrap, flex-wrap-reverse: Control the wrapping behavior of flex items within a flex container.

  <div class="d-flex flex-nowrap">
  <!-- Flex items will not wrap -->
  </div>
  <div class="d-flex flex-wrap">
  <!-- Flex items will wrap if needed -->
  </div>

• order-*: Set the order of a flex item within its flex container.

  <div class="d-flex">
  <div class="order-3">Flex item 1 (appears third)</div>
  <div class="order-1">Flex item 2 (appears first)</div>
  <div class="order-2">Flex item 3 (appears second)</div>
  </div>

Display Utilities

Display utilities allow you to control the display behavior of elements.

• d-none, d-inline, d-inline-block, d-block, d-table, d-table-row, d-table-cell, d-flex, d-inline-flex: Set the display property of an element.

  <div class="d-none">Hidden element</div>
  <div class="d-inline">Inline element</div>
  <div class="d-block">Block element</div>
  <div class="d-flex">Flex container</div>

Sizing Utilities

Sizing utilities allow you to control the width and height of elements.

• w-*, h-*: Set the width or height of an element. Replace * with a percentage value from 25 to 100 in increments of 25, or use auto.

  <div class="w-50">Element with 50% width</div>
  <div class="h-100">Element with 100% height</div>

• mw-100, mh-100: Set the maximum width or height of an element to 100%.

  <div class="mw-100">Element with maximum width of 100%</div>
  <div class="mh-100">Element with maximum height of 100%</div>

• min-vw-100, min-vh-100: Set the minimum width or height of an element to 100% of the viewport width or height.

  <div class="min-vw-100">Element with minimum width of 100% viewport width</div>
  <div class="min-vh-100">Element with minimum height of 100% viewport height</div>

• vw-100, vh-100: Set the width or height of an element to 100% of the viewport width or height.

  <div class="vw-100">Element with width of 100% viewport width</div>
  <div class="vh-100">Element with height of 100% viewport height</div>

Border Utilities

Border utilities allow you to add or remove borders around elements.

• border, border-top, border-end, border-bottom, border-start: Add borders to all sides or specific sides of an element.

  <div class="border">Element with borders on all sides</div>
  <div class="border-top">Element with top border</div>

• border-0, border-top-0, border-end-0, border-bottom-0, border-start-0: Remove borders from all sides or specific sides of an element.

  <div class="border-0">Element without borders</div>
  <div class="border border-bottom-0">Element without bottom border</div>

• border-*: Set the border color of an element. Replace * with a contextual color name like primary, secondary, success, etc.

  <div class="border border-primary">Element with primary-colored border</div>

• rounded, rounded-top, rounded-end, rounded-bottom, rounded-start, rounded-circle, rounded-pill: Add rounded corners to an element or specific corners of an element.

  <div class="rounded">Element with rounded corners</div>
  <div class="rounded-circle">Element with circular shape</div>

Background Utilities

Background utilities allow you to control the background color and image of elements.

• bg-*: Set the background color of an element. Replace * with a contextual color name like primary, secondary, success, etc.

  <div class="bg-primary">Element with primary background color</div>

• bg-gradient: Add a gradient effect to the background of an element.

  <div class="bg-gradient-primary">Element with primary gradient background</div>

Position Utilities

Position utilities allow you to control the positioning of elements.

• position-static, position-relative, position-absolute, position-fixed, position-sticky: Set the positioning behavior of an element.

  <div class="position-relative">
  <div class="position-absolute">Absolutely positioned element</div>
  </div>

• top-*, bottom-*, start-*, end-*: Set the position of an element relative to its positioned ancestor. Replace * with a value from 0 to 100 in increments of 25, or use 50.

  <div class="position-relative">
  <div class="position-absolute top-0 start-0">Element positioned at the top-left corner</div>
  </div>

Shadow Utilities

Shadow utilities allow you to add or remove shadow effects to elements.

• shadow, shadow-none, shadow-sm, shadow-lg: Add or remove box shadows from an element.

  <div class="shadow">Element with a box shadow</div>
  <div class="shadow-none">Element without a box shadow</div>

Responsive Utilities

Responsive utilities allow you to apply styles based on the viewport size.

• d-*-none, d-*-inline, d-*-inline-block, d-*-block, d-*-table, d-*-table-row, d-*-table-cell, d-*-flex, d-*-inline-flex: Set the display behavior of an element at specific breakpoints. Replace * with sm, md, lg, xl, or xxl.

  <div class="d-none d-md-block">Element hidden on small screens and visible on medium and larger screens</div>

• Responsive variations of spacing, flex, margin, padding, and other utilities: Add breakpoint-specific classes to apply styles at different viewport sizes.

  <div class="mt-3 mt-md-0">Element with top margin on small screens and no top margin on medium and larger screens</div>

What I'm building

Delegate tasks. Get software.

Give Vroni a GitHub issue, bug report, spec, or rough idea. It reads the repo, plans the change, writes code, runs checks, and works toward a review-ready pull request.

Take a look at vroni.com