How to use the Bootstrap colors

Programming

Bootstrap comes with color utility classes. These colors are part of Bootstrap and we don’t need to do anything to make them work. Of course it is possible to change the default colors of Bootstrap and it is recommended if you are making a unique website. But you don’t need to. Let’s look at the default color classes which are default included in Bootstrap.

What are the default Bootstrap colors?

The following text color classes are available.

  • text-primary
  • text-secondary
  • text-danger
  • text-warning
  • text-success
  • text-info
  • text-dark
  • text-white
  • text-black-50
  • text-white-50
  • text-body
  • text-muted

Some examples with the different color classes.


<div class="container">
	<p>Here we have some example text that has the default color for a paragraph tag</p>
	<p class="text-primary">This text is formatted with the text-primary class</p>
	<p class="text-secondary">text-secondary is some light grey color that can be used for not very important text</p>
	<p class="text-success">The text-success class can be used for success messages</p>
	<p class="text-danger">While the text-danger class is more appropriate for messages where things go wrong</p>
	<p class="text-warning">Warning! This text is orange and meant as a warning.</p>
	<p class="text-info">Just an informal text-info message in a nice color.</p>	
</div>

Output:

Related Posts