Bootstrap has some contextual classes that is used to provide meaning through colors. 

Text Colors

The classes for text colors are:

  1. .text-muted
  2. .text-primary
  3. .text-secondary (Bootstrap 4)
  4. .text-success
  5. .text-info
  6. .text-warning
  7. .text-danger
  8. .text-light (Bootstrap 4)
  9. .text-dark (Bootstrap 4)

Contextual text classes can also work on anchors (links).

Background Colors

Similar to the contextual text color classes, you can easily set the background also. Anchor components darken on hover, just like the text classes. The classes for background colors are:

  1. .bg-primary
  2. .bg-secondary (Bootstrap 4)
  3. .bg-success
  4. .bg-info
  5. .bg-warning
  6. .bg-danger
  7. .bg-light (Bootstrap 4)
  8. .bg-dark (Bootstrap 4)
  9. .bg-white (Bootstrap 4)

Colors in Tables

Contextual classes can be used to color table rows (<tr> or <th>) or individual table cells (<td>).

  1. .active
  2. .primary
  3. .secondary (Bootstrap 4)
  4. .success
  5. .info
  6. .warning 
  7. .danger
  8. .light (Bootstrap 4)
  9. .dark (Bootstrap 4)


You can add button classes on <a>, <button>, or <input> elements. You need to add class .btn to make a link or element look like a button.

  1. .btn-default
  2. .btn-primary
  3. .btn-secondary (Bootstrap 4)
  4. .btn-success
  5. .btn-info
  6. .btn-warning
  7. .btn-danger
  8. .btn-light (Bootstrap 4)
  9. .btn-dark (Bootstrap 4)
  10. .btn-link

Outline Buttons

You can remove all background images and colors on any button by replacing the default modifier classes with the .btn-outline-*.


You can add .btn-lg or .btn-sm for additional sizes. You can create block level buttons by adding .btn-block class.

Disabled Buttons

You can make buttons look inactive by adding the disabled boolean attribute to any <button> element.