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-white in combination with .bg-dark to 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.

Link example

<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

Report a problem on this page

Date modified:: 2019-05-01