Bootstrap contains pre-set color classes that can be applied to text, links, and other block elements. These colors were selected to convey specific meaning in your site.
The following are samples showing the available colors applied to block level elements so you can really see what you have to work with. The colors are named so you can see its intended use. Primary blue for instance should be used to convey standard everyday information. Danger red would be used to convey errors - like a failed login.
If you wanted to create a big green box on your page that is 50% wide with white text centered inside, you could mark it up like this:
<div class="d-block bg-success text-white p-5 w-50 text-center">
<h1>This is my green box</h1>
</div>
The chain of classes you see here are:
d-block creates a block-level element. A box.bg-success sets the background color to "success" green.text-white is pretty obvious. Sets the text to white on this box.p-5 Also obvious - sets the padding to level 5 around the box.w-50 This one is pretty fun. You can specify the width of 25, 50, 75, or 100 percent with the w-{number} notation.text-center Very simple - centers the text within the box - this one you will use a lot. There are also text-right and text-left classes..text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50