Context colors

Bootstrap defines nine context types to give the user a visual indicator of what type of information is being conveyed: primary, secondary, success,info,warning, danger, dark, light, and white as well as providing the developer with simple classes to assign context to elements via text color,text-<context>, or background color,bg-<context>. For elements containing text, Bootstrap also provides the muted context color.

The available classes are these:

• text-muted
• text-primary and bg-primary
• text-secondary and bg-secondary
• text-info and bg-info
• text-warning and bg-warning
• text-danger and bg-danger
• text-light and bg-light
• text-dark and bg-dark
• text-white and bg-white

Bootstrap also provides a helper class for making an element transparent:

.bg-transparent {
     background-color: transparent !important;
}

By defining focus and hover rules, Bootstrap ensures that links blend in nicely with the different backgrounds. Consider this example:

a.bg-danger:focus, a.bg-danger:hover {
 ...