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

💡 Tip: Use .text-white or .text-dark to ensure text is readable on colored backgrounds.

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

Sizes: Scale from 0 (none) to 5 (largest). Example: .p-0, .p-1, ... .p-5

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

💡 Pro Tip: Combine shadows with .rounded classes for a modern card-like appearance!

< Previous: Grid Layout | Next: Typography >