← Back to Examples

Bootstrap Utility Classes Demo

Quick styling without writing custom CSS! These utility classes cover the most common styling needs.

1. Spacing Utilities

Format: {property}{sides}-{size} where property is m (margin) or p (padding), sides is t/b/s/e/x/y, size is 0-5.

Margin Examples
m-0 (no margin)
m-2 (0.5rem margin)
m-4 (1.5rem margin)
mt-3 (margin-top 1rem)
mx-5 (horizontal margin 3rem)
Padding Examples
p-0 (no padding)
p-3 (1rem padding)
p-5 (3rem padding)
py-4 (vertical padding 1.5rem)
ps-5 (padding-start 3rem)
Center with mx-auto
Centered with mx-auto (width: 300px)

2. Color Utilities

Text Colors

text-primary - Blue text

text-secondary - Gray text

text-success - Green text

text-danger - Red text

text-warning - Yellow text

text-info - Cyan text

text-muted - Muted text

text-body - Default body color

Background Colors
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark

3. Display Utilities

Display Classes
d-block (full width)
d-inline d-inline
d-inline-block
Responsive Display
Visible on mobile only (d-block d-md-none)
Hidden on mobile, visible on tablet+ (d-none d-md-block)
Visible on desktop only (d-none d-lg-block)

Resize your browser to see elements appear/disappear!

4. Flexbox Utilities

justify-content
Start
Start
Center
Center
End
End
Between
Between
Between
Around
Around
Around
align-items
Start
Start
Center
Center
End
End
Flex Direction

flex-row (default):

1
2
3

flex-column:

1
2
3
Gap
gap-3
gap-3
gap-3

5. Text Utilities

Alignment

text-start (left aligned)

text-center (centered)

text-end (right aligned)

Weight & Style

fw-bold (bold text)

fw-semibold (semi-bold)

fw-normal (normal weight)

fw-light (light weight)

fst-italic (italic text)

Transform

TEXT-LOWERCASE (lowercase)

text-uppercase (uppercase)

text capitalize (capitalize)

Font Size

fs-1 (largest)

fs-3 (medium)

fs-5 (smaller)

fs-6 (smallest)

Text Wrapping
This long text will be truncated with an ellipsis when it overflows.

6. Borders, Rounded Corners & Shadows

Borders
border (all sides)
border-top
border-bottom
border-primary
border-danger border-3
Rounded Corners
rounded
rounded-top
rounded-pill
circle
rounded-3 (larger radius)
Shadows
shadow-none
shadow-sm
shadow (default)
shadow-lg

7. Sizing Utilities

Width
w-25 (25% width)
w-50 (50% width)
w-75 (75% width)
w-100 (100% width)
w-auto
Height
h-25
h-50
h-75
h-100

8. Position Utilities

Position Classes
  • position-static - Default positioning
  • position-relative - Relative to normal position
  • position-absolute - Relative to positioned parent
  • position-fixed - Fixed to viewport
  • position-sticky - Sticky positioning
Fixed Top/Bottom
  • fixed-top - Fixed to top of viewport
  • fixed-bottom - Fixed to bottom of viewport
  • sticky-top - Sticky at top when scrolling
Translate Middle
Centered!

← Back to Examples