Colors help you present the context based on their distinctiveness.
There might be a red colored warning, a light brown <div> with some side note etc.
In this
Bootstrap Utility Classes
Bootstrap has a list of utility classes for different color templates for text content in the websites.
This also includes the support for styling your link elements for hover and other states. Let’s take a look:
- .text-primary
- .text-secondary
- .text-success
- .text-danger
- .text-warning
- .text-info
- .text-light
- .text-dark
- .text-muted
- .text-white
The code below gives a simple illustration of using these classes with the text content.
1 2 3 4 5 6 7 8 9 10 | <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> |
You can use the same contextual text classes to work on anchors. You can style these anchors for hover and focus states.
Please note, that the .text-white and .text-muted classes are not used for this purpose. See the code below for more:
1 2 3 4 5 6 7 8 9 10 | <p><a href="#" class="text-primary">Primary link</a></p> <p><a href="#" class="text-secondary">Secondary link</a></p> <p><a href="#" class="text-success">Success link</a></p> <p><a href="#" class="text-danger">Danger link</a></p> <p><a href="#" class="text-warning">Warning link</a></p> <p><a href="#" class="text-info">Info link</a></p> <p><a href="#" class="text-light bg-dark">Light link</a></p> <p><a href="#" class="text-dark">Dark link</a></p> <p><a href="#" class="text-muted">Muted link</a></p> <p><a href="#" class="text-white bg-dark">White link</a></p> |
Just like the text content, we have contextual classes for controlling the background colors too. Here too, the anchor elements will get darker on hover. In some cases you might want to use the .text-* classes as well for proper display. Check out the code to know more:
Bootstrap Background color
.bg-primary
1 2 3 4 5 6 7 8 9 | <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-white">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> |
Bootstrap Background gradient
Background gradient can be controlled by its own set of utility classes. For this, the $enable-gradients should be set to true.
Once that’s done, you can use the .bg-gradient- utility classes. However, by default, $enable-gradients is set to false.
The code we are using in the example below is broken. We have intentionally done this for easier customization.
You can learn more about the Sass operation and enable these classes.
1 2 3 4 5 6 7 8 | <div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div> <div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div> <div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div> <div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div> <div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div> <div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div> <div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div> <div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div> |
Bootstrap Dealing with specificity
There might come instances where contextual classes may not be applied because of the specificity of another selector.
In such cases wrapping your element’s content in a <div> with the class proves to be a helpful workaround.
Conveying meaning to assistive technologies
To convey the meaning of the content to the assistive technologies mere colors might not be that effective.
You need to ensure that whatever information the colors are denoting is either obvious from your content itself or there are alternative means to include it.