Bootstrap 5 Utility Classes

Bootstrap provides utility classes for common CSS properties. These utility classes help you quickly style elements without writing custom CSS.

Utility Categories:
Spacing Colors Text Borders Display Flex Position

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 - eliminates margin or padding
    • 1 - 0.25rem (4px)
    • 2 - 0.5rem (8px)
    • 3 - 1rem (16px)
    • 4 - 1.5rem (24px)
    • 5 - 3rem (48px)
    • auto - auto margin
Margin Examples:
m-0 (no margin)
m-3 (margin: 1rem)
mt-4 (margin-top: 1.5rem)
mx-auto (horizontally centered)
Padding Examples:
p-0 (no padding)
p-3 (padding: 1rem)
py-4 (padding-top & bottom: 1.5rem)
px-5 (padding-left & right: 3rem)
Code Example:
<div class="m-3">Margin all sides: 1rem</div>
<div class="mt-4">Margin top: 1.5rem</div>
<div class="p-3">Padding all sides: 1rem</div>
<div class="py-4">Padding top & bottom: 1.5rem</div>

Colors

Bootstrap comes with a wide array of color utility classes for text, backgrounds, and borders.

Text Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

Background Colors
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
Background Gradient
.bg-primary.bg-gradient
.bg-success.bg-gradient
Code Example:
<p class="text-primary">.text-primary</p>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>

Text

Bootstrap provides various text utilities to control alignment, wrapping, weight, and more.

Text Alignment

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Right aligned on viewports sized SM (small) or wider.

Right aligned on viewports sized MD (medium) or wider.

Right aligned on viewports sized LG (large) or wider.

Right aligned on viewports sized XL (extra-large) or wider.

Text Wrapping & Overflow
This text wraps.
This text should overflow the parent.
Text Transform

LOWERCASED TEXT.

uppercased text.

capitalized text.

Font Weight & Italics

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Code Example:
<p class="text-center">Center aligned text.</p>
<p class="text-uppercase">uppercased text.</p>
<p class="fw-bold">Bold text.</p>

Borders

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

Border
.border
.border-top
.border-end
.border-bottom
.border-start
Border Color
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
Border Width
.border-1
.border-2
.border-3
.border-4
.border-5
Border Radius
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
Code Example:
<div class="p-3 border">.border</div>
<div class="p-3 border border-danger">.border-danger</div>
<div class="p-3 border rounded-pill">.rounded-pill</div>

Display

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

Display Values
.d-inline
.d-inline
.d-block
.d-block
Hiding Elements
Hidden on lg and wider screens
Hidden on screens smaller than lg
Display in Print
Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
Code Example:
<div class="d-inline p-2 bg-primary text-white">.d-inline</div>
<div class="d-none d-lg-block">Hidden on screens smaller than lg</div>
<div class="d-print-none">Screen Only (Hide on print only)</div>

Flex

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

Enable Flex Behaviors
I'm a flexbox container!
I'm an inline flexbox container!
Direction
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Justify Content
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Align Items
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Code Example:
<div class="d-flex">...</div>
<div class="d-flex flex-row-reverse">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex align-items-center">...</div>

Position

Use these shorthand utilities for quickly configuring the position of an element.

Position Values
.position-static
.position-relative
.position-absolute .top-0 .start-0
.position-absolute .top-0 .end-0
.position-absolute .bottom-0 .start-0
.position-absolute .bottom-0 .end-0
Fixed Position

Use .position-fixed to position an element relative to the viewport, which means it always stays in the same place even if the page is scrolled.

Sticky Position

Use .position-sticky to position an element based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position.

Code Example:
<div class="position-relative">
  <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>