Colors

Background Colors

bg-alt

bg-inv

bg-primary

bg-secondary

bg-success

bg-warning

bg-danger

Text Colors

Normal text color

Muted text color

Primary text color

Secondary text color

Success text color

Warning text color

Danger text color

Inverse text color on inverse background

Border Colors

Default border

Inverse border

Link Colors

This is a link - normal link styling

Inverse link - for use on dark backgrounds

Buttons

Button Types

a.btn

Button Colors

Button Sizes

Button Groups

Inputs

Text Input

Textarea

Select

Checkbox 1 Checkbox 2

Radio 1 Radio 2

Focus & Effects

Click or tab to inputs and buttons to see focus styles.

Drop shadow effect

Elevation & Shadows

Elevation Levels

Elevation creates visual hierarchy. Positive levels rise above the page with drop shadows. Negative levels cut into the page with inset shadows.

Level -2
Deep inset

Level -1
Shallow inset

Level 0
Page level

Level 1
Small shadow

Level 2
Medium shadow

Level 3
Large shadow

Drop Shadow

Drop Shadow
.drop-shadow class

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph Text

This is a paragraph of text demonstrating the base font family and size. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is small text.

This is bold text.

Monospace

Inline code uses the monospace font family.

Preformatted text also uses monospace.

Spacing & Layout

Key

Green = Padding
Orange = Margins

Padding

Margins

Container

The .container class limits content width.

Effects & Animation

Border Radius

round

rtl

rtr

rbr

rbl

Note: Add 0 suffix (e.g., r0, rt0) to cancel border radius.