Bootstrap 4 – 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 {
     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

Comments are closed.