Colour
Dark background and text white
Use to make text appear white in colour and background dark in colour.
Appearance
This text is styled with .text-white and .bg-dark .
Correct use
Compliance point(s):
- Use to introduce contrast to information.
- Use
.text-whitein combination with.bg-darkto ensure sufficient contrast between text and background. - Wrap text in a <span> tag if a style does not appear as it is meant to, due to specificity reasons
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
- Do not use as the only way to communicate information or intent, as colour alone is not accessible
Code
// Dark background and white text:
<p class="text-white bg-dark">...</p>CSS Class
.bg-dark- Set a background color to dark
.text-white- Set a font colour to white
Example
This container is styled with .text-white and .bg-dark.
<div class="well bg-dark text-white">
<p>This container is styled with <code>.text-white</code> and <code>.bg-dark</code>.</p>
<p><a class="text-white" href="#">Link example</a></p>
<button class="bg-dark text-white" type="button">Button example</button>
</div>Page details
- Date modified: