Color utilities
Background classes
Apply the following classes to modify the background color of any element.
bg-primary
bg-default
bg-success
bg-info
bg-warning
bg-danger
Background hover classes
Apply the following classes to modify the background color of any element on hover.
bg-primary bg-primary-hover
bg-default bg-default-hover
bg-success bg-success-hover
bg-info bg-info-hover
bg-warning bg-warning-hover
bg-danger bg-danger-hover
Additional color weights
Each color can be extended by adding and additional weight to the class.
bg-primary-100
bg-primary-200
bg-primary-300
bg-primary-400
bg-primary-500
bg-primary-600
bg-primary-700
bg-primary-800
bg-primary-900
bg-default-100
bg-default-200
bg-default-300
bg-default-400
bg-default-500
bg-default-600
bg-default-700
bg-default-800
bg-default-900
bg-success-100
bg-success-200
bg-success-300
bg-success-400
bg-success-500
bg-success-600
bg-success-700
bg-success-800
bg-success-900
bg-info-100
bg-info-200
bg-info-300
bg-info-400
bg-info-500
bg-info-600
bg-info-700
bg-info-800
bg-info-900
bg-warning-100
bg-warning-200
bg-warning-300
bg-warning-400
bg-warning-500
bg-warning-600
bg-warning-700
bg-warning-800
bg-warning-900
bg-danger-100
bg-danger-200
bg-danger-300
bg-danger-400
bg-danger-500
bg-danger-600
bg-danger-700
bg-danger-800
bg-danger-900
Text Color classes
Apply the following classes to modify the color of any element.
color-primary
Hello world!
Hello world!
color-default
Hello world!
Hello world!
color-success
Hello world!
Hello world!
color-info
Hello world!
Hello world!
color-warning
Hello world!
Hello world!
color-danger
Hello world!
Hello world!
Border Color classes
Apply the following classes to modify the border color of any element.
border-color-primary
Hello world!
border-color-default
Hello world!
border-color-success
Hello world!
border-color-info
Hello world!
border-color-warning
Hello world!
border-color-danger
Hello world!