Day 3 - Utility Classes

Quickly style elements with Bootstrap's powerful utility classes.

1. Text Colors

Apply theme colors to text using .text-{color} classes:

.text-primary

Primary text

.text-secondary

Secondary text

.text-success

Success text

.text-danger

Danger text

.text-warning

Warning text

.text-info

Info text

.text-muted

Muted text

2. Background Colors

Apply background colors using .bg-{color} classes:

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark

3. Spacing (Padding & Margin)

Bootstrap uses shorthand notation: {property}{sides}-{size}

Properties
  • p = Padding
  • m = Margin
Sides
  • t = Top
  • b = Bottom
  • s = Start (left)
  • e = End (right)
  • x = Horizontal (left & right)
  • y = Vertical (top & bottom)
  • Blank = All sides
Padding Examples

.p-3 (all sides)

Padding all sides

.pt-3 (top only)

Padding top

.px-5 (horizontal)

Padding left & right

.py-4 (vertical)

Padding top & bottom
Margin Examples

.m-3 (all sides)

Margin all sides

.mt-4 (top only)

Margin top

.ms-5 (start/left only)

Margin left

4. Borders

Adding Borders

.border

All sides

.border-top

Top only

.border-start

Left only
Border Thickness

.border .border-1

Thin

.border .border-3

Medium

.border .border-5

Thick
Border Colors
.border-primary
.border-success
.border-danger
.border-warning
Border Radius (Rounded Corners)

.rounded-0

Sharp

.rounded-1

Small

.rounded-3

Medium

.rounded-pill

Pill

.rounded-top

Top

.rounded-circle

●

5. Box Shadows

Add depth to elements with shadow utilities:

.shadow-sm

Small shadow

.shadow

Regular shadow

.shadow-lg

Large shadow
< Previous: Images | Next: Components >