Bootstrap Contextual Colors and Backgrounds
Bootstrap has contextual classes that is used to provide meaning through colors.
Contextual Classes
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
Text Colors
The classes for text colors are:
- .text-muted
- .text-primary
- .text-secondary
- .text-success
- .text-info
- .text-warning
- .text-danger
- .text-light
- .text-dark
Contextual text classes can also work on anchors (links).
Background Colors
Similar to the contextual text color classes, you can easily set the background color. Background utilities do not set color, so in some cases you may need to add text color utilities for contrasting text.
- .bg-primary
- .bg-secondary
- .bg-success
- .bg-info
- .bg-warning
- .bg-danger
- .bg-light
- .bg-dark
- .bg-white
- .bg-transparent
- .bg-body
Background Gradient
By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
Background Opacity
You can add .bg-opacity utility classes:
- bg-opacity-10
- bg-opacity-25
- bg-opacity-50
- bg-opacity-25
Colors in Tables
Contextual classes can be used to color table rows (<tr> or <th>) or individual table cells (<td>).
- .active
- .primary
- .secondary
- .success
- .info
- .warning
- .danger
- .light
- .dark
Buttons
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.
- .btn-default
- .btn-primary
- .btn-secondary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-light
- .btn-dark
- .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-*.
Sizes
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.