Bootstrap Utilities: 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:, {

background-color: #bd2130 !important;

}, {

background-color: #dae0e5 !important;

}, {

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.

Leave a Reply

Your email address will not be published. Required fields are marked *