Robert's Resume

Colors

Code

.text-muted

.text|bg-primary

.text|bg-success

.text|bg-info

.text|bg-warning

.text|bg-danger

.text|bg-secondary

.text|bg-white

.text|bg-dark

.text-body

.text|bg-light

.text-bg-*

Top

Definitions

Muted
▪ Distinguishes less important information from the main text. (#6c757d)
Primary
▪ Conveys that this text is important. (#0d6efd)
Success
▪ Indicates a successful interaction. (#198754)
Info
▪ Used to relate some information. (#0dcaf0)
Warning
▪ Represents a warning. (#ffc107)
Danger
▪ Indicates danger. (#dc3545)
Secondary
▪ Creates smaller, secondary text in any heading. ($gray-600: #6c757d)
White
▪ Used mostly for dark backgrounds/themes. (#fff)
Dark
▪ Ideal for lighter backgrounds/themes. ($gray-900: #212529)
Body
▪ This is the default body color, often just black/dark. ($gray-900: #212529)
Light
▪ Used mostly on darker backgrounds, this is a light gray text. ($gray-100: #f8f9fa)
Top

Key Points

  • Referred to as contextual classes as they add meaning through colors.
  • Contextual classes can be used on text or backgrounds.
  • Each contextual class has a background except Muted and Body.
  • You can use .link-* classes to colorize links. These classes add a :hover and a :focus state, unlike .text-*.
  • You can add 50% opacity to black or white text with .text-black-50 or text-white-50.
  • Top

Colors

This is muted/less important text.

This is primary/important text.

This is success text.

This is information text.

This is warning text.

This is danger text.

This is secondary text.

This is white text.

This is dark text.

This is body/default text.

This is light text.

This is dark text with 50% opacity.

This is white text with 50% opacity.

Add text-muted|primary|success|Info|warning|danger|secondary|white|dark|body|light to a container.

Add -50 to dark and white text to add 50% opacity.

Backgrounds

Primary

Success

Info

Warning

Danger

Secondary

White

Dark

Light

Add bg-primary|success|info|warning|danger|secondary|white|dark|light to a container.

NOTE: The text isn't always clear on all backgrounds - see Background Text tab for a fix.

Background Text

Primary

Success

Info

Warning

Danger

Secondary

White

Dark

Light

Use text-bg-* to have Bootstrap automatically handle the appropriate text color for each background.