Bootstrap Utilities

Borders

Use border utilities to quickly style the border and border-radius of an element.

Border

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
                        

Border Color

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
                        

Border Width

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
                        

Border Radius

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
                        

Display Properties

Quickly and responsively toggle the display value of components and more with the display utilities.

Display Values

<div class="d-inline">d-inline</div>
<div class="d-inline-block">d-inline-block</div>
<div class="d-block">d-block</div>
<div class="d-grid">d-grid</div>
<div class="d-flex">d-flex</div>
<div class="d-inline-flex">d-inline-flex</div>
<div class="d-none">d-none</div>
                        

Responsive Display

<div class="d-none d-sm-block">Hidden on xs, shown on sm and up</div>
<div class="d-block d-md-none">Shown on xs and sm, hidden on md and up</div>
<div class="d-none d-lg-block d-xl-none">Hidden on all except lg</div>
                        

Print Display

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
                        

Flex Utilities

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Enable Flex

<div class="d-flex">I'm a flexbox container!</div>
<div class="d-inline-flex">I'm an inline flexbox container!</div>
                        

Direction

<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-row-reverse">
  <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>
<div class="d-flex flex-column-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
                        

Justify Content

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
                        

Align Items

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
                        

Align Self

<div class="d-flex">
  <div class="align-self-start">Aligned flex item</div>
  <div class="align-self-end">Aligned flex item</div>
  <div class="align-self-center">Aligned flex item</div>
  <div class="align-self-baseline">Aligned flex item</div>
  <div class="align-self-stretch">Aligned flex item</div>
</div>
                        

Fill

<div class="d-flex">
  <div class="flex-fill">Flex item with a lot of content</div>
  <div class="flex-fill">Flex item</div>
  <div class="flex-fill">Flex item</div>
</div>
                        

Grow and Shrink

<div class="d-flex">
  <div class="flex-grow-1">Flex item</div>
  <div>Flex item</div>
  <div>Third flex item</div>
</div>

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

Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.

Margin and Padding

The classes are named using the format: {property}{sides}-{size}

• Property: m for margin, p for padding
• Sides:
  • t - top
  • b - bottom
  • s - start (left in LTR)
  • e - end (right in LTR)
  • x - left and right
  • y - top and bottom
  • blank - all 4 sides
• Size: 0 to 5, or auto

<div class="mt-4">
  <!-- Margin top: 1.5rem (24px) -->
</div>

<div class="px-3">
  <!-- Padding left and right: 1rem (16px) -->
</div>

<div class="m-0">
  <!-- Margin: 0 -->
</div>

<div class="py-5">
  <!-- Padding top and bottom: 3rem (48px) -->
</div>

<div class="ms-auto">
  <!-- Margin-left: auto (pushes element to the right) -->
</div>
                        

Gap

<div class="d-flex gap-2">
  <div class="p-2 bg-light">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
  <div class="p-2 bg-light">Flex item</div>
</div>

<div class="d-grid gap-3">
  <div class="p-2 bg-light">Grid item 1</div>
  <div class="p-2 bg-light">Grid item 2</div>
  <div class="p-2 bg-light">Grid item 3</div>
</div>
                        

Shadows

Add or remove shadows to elements with box-shadow utilities.

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
                        

Text Utilities

Text Alignment

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-end">End aligned on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned on viewports sized XL (extra-large) or wider.</p>
                        

Text Wrapping and Overflow

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

<div class="text-nowrap bg-light" style="width: 8rem;">
  This text should overflow the parent.
</div>

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
                        

Text Transform

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">capitalized text.</p>
                        

Font Weight and Italics

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
                        

Monospace

<p class="font-monospace">This is in monospace</p>
                        

Reset Color

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
                        

Text Decoration

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>