Dark background and text white

Use to make text appear white in colour and background dark in colour. 


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


// Dark background and white text:
		<p class="text-white bg-dark">...</p>

CSS Class

Set a background color to dark
Set a font colour to white


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>
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: