Tutorials Tonight's Logo

BOOTSTRAP 4 COLORS


Bootstrap provide some classes that are color specific classes, which are used to specifically change color of either text, background-color, link-style or hover color.

These contextual classes are used to deliever certain meaning through the color of contents.

We will see color classes for 3 different use :

  1. Text Colors
  2. Anchor Color and Hover Effect
  3. Background Color


1.) Bootstrap Text Color

Text color classes are used to set colors of text in bootstrap. Following are the color classes for text in bootstrap with their color value.

Class Name Color Value Of Text
.text-primary #007bff
.text-secondary #6c757d
.text-success #28a745
.text-warning #ffc107
.text-danger #dc3545
.text-info #17a2b8
.text-light #f8f9fa
.text-dark #343a40
.text-muted #6c757d
.text-white #fff
<p class="text-primary">This is primary color.</p>
<p class="text-secondary">This is secondary color.</p>
<p class="text-success">This is success color.</p>
<p class="text-danger">This is danger color.</p>
<p class="text-warning">This is warning color.</p>
<p class="text-info">This is info color.</p>
<p class="text-light bg-dark">This is light color.</p>
<p class="text-dark">This is dark color.</p>
<p class="text-muted">This is muted color.</p>
<p class="text-white bg-dark">This is white color.</p>
▶ Run the code

Bootstrap Anchor Color

The same above clsses that we used above also works fine for anchor tags (<a>). In addition to text of color it also provide hover color and focus color to anchor tags.

Note: .text-muted and .text-white has no link style.

Class Name Link Text Color hover and focus color
.text-primary #007bff #0062cc
.text-secondary #6c757d #545b62
.text-success #28a745 #1e7e34
.text-warning #ffc107 #d39e00
.text-danger #dc3545 #bd2130
.text-info #17a2b8 #117a8b
.text-light #f8f9fa #dae0e5
.text-dark #343a40 #1d2124
<a href="#" class="text-primary">Primary Link</a>
<a href="#" class="text-secondary">Secondary Link</a>
<a href="#" class="text-info">Info Link</a>
<a href="#" class="text-danger">Danger Link</a>
<a href="#" class="text-warning">Warning Link</a>
<a href="#" class="text-success">Success Link</a>
<a href="#" class="text-light">Light Link</a>
<a href="#" class="text-dark">Dark Link</a>
▶ Run the code


Bootstrap Background Colors

Same as text color you can also set background color of HTML elements using bootstrap. Bootstrap class for background color are shown below.

You can also set text color for text to be visible with such background.

Note: You can also set .bg-* classes to anchor tag. On anchor tags you will get hover effect for elements background.

.bg-primary

.bg-secondary

.bg-info

.bg-warning

.bg-danger

.bg-dark

.bg-success

.bg-light

.bg-white

Anchor tag Primary Color Anchor tag Warning Color Anchor tag Danger Color
<p class="text-white bg-primary">.bg-primary</p>
<p class="text-white bg-secondary">.bg-secondary</p>
<p class="text-white bg-info">.bg-info</p>
<p class="text-white bg-warning">.bg-warning</p>
<p class="text-white bg-danger">.bg-danger</p>
<p class="text-white bg-dark">.bg-dark</p>
<p class="text-white bg-success">.bg-success</p>
<p class="bg-light">.bg-light</p>
<p class="bg-white">.bg-white</p>
<a href="#" class="text-white bg-primary">Anchor tag Primary Color</a>
<a href="#" class="text-white bg-warning">Anchor tag Warning Color</a>
<a href="#" class="text-white bg-danger">Anchor tag Danger Color</a>
▶ Run the code

Points to remember:

  1. Bootstrap color classes is used to give certain color to HTML elements which defines some information regarding the content.
  2. You can set text color, background color, anchor color with hover and focus effect on it.
Bootstrap 4 Table

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.