Search

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>
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: