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 {
background-color: #bd2130 !important;
} a.bg-light:focus, a.bg-light:hover {
background-color: #dae0e5 !important;
}
a.bg-dark:focus, a.bg-dark:hover {
background-color: #1d2124 !important;
}
Figure 8.5: Bootstrap’s different context background classes in action
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.