Text Colors
Copy
<!-- Text Color --><span class="text-primary"></span><span class="text-secondary"></span><span class="text-success"></span><span class="text-danger"></span><span class="text-warning"></span><span class="text-info"></span><span class="text-light"></span><span class="text-dark"></span><span class="text-body"></span><span class="text-muted"></span><span class="text-black-50"></span><span class="text-white-50"></span>.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-white
.text-body
.text-muted
.text-black-50
.text-white-50
Background colors
Copy
<!-- Background Color --><span class="bg-primary"></span><span class="bg-secondary"></span><span class="bg-success"></span><span class="bg-danger"></span><span class="bg-warning"></span><span class="bg-info"></span><span class="bg-light"></span><span class="bg-dark"></span><span class="bg-white"></span><span class="bg-transparent"></span>.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
Background gradient
Copy
<!-- 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..bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark