keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Colors

Colors.

Creating your own color utility classes allows full control over background, text, and border colors. This method ensures a consistent design, custom branding, and easy scalability without modifying Bootstrap’s core files.

Background Color

You can use the .bg-* classes to colorize background.

Blue
Indigo
Purple
Pink
Red
Orange
Green
Teal
Cyan
<div class="bg-blue p-2 text-white text-center">Blue</div>
<div class="bg-indigo p-2 text-white text-center">Indigo</div>
<div class="bg-purple p-2 text-white text-center">Purple</div>
<div class="bg-pink p-2 text-white text-center">Pink</div>
<div class="bg-red p-2 text-white text-center">Red</div>
<div class="bg-orange p-2 text-white text-center">Orange</div>
<div class="bg-green p-2 text-white text-center">Green</div>
<div class="bg-teal p-2 text-black text-center">Teal</div>
<div class="bg-cyan p-2 text-white text-center">Cyan</div>

Text Color

You can use the .text-* classes to colorize text.

Blue
Indigo
Purple
Pink
Red
Orange
Green
Teal
Cyan 
<span class="text-blue">Blue</span>
<span class="text-indigo">Indigo</span>
<span class="text-purple">Purple</span>
<span class="text-pink">Pink</span>
<span class="text-red">Red</span>
<span class="text-orange">Orange</span>
<span class="text-green">Green</span>
<span class="text-teal">Teal</span>
<span class="text-cyan">Cyan</span>

Border Color

You can use the .border-* classes to colorize border.

Blue
Indigo
Purple
Pink
Red
Orange
Green
Teal
Cyan
<div class="border border-blue p-2 text-center">Blue</div>
<div class="border border-indigo p-2 text-center">Indigo</div>
<div class="border border-purple p-2 text-center">Purple</div>
<div class="border border-pink p-2 text-center">Pink</div>
<div class="border border-red p-2 text-center">Red</div>
<div class="border border-orange p-2 text-center">Orange</div>
<div class="border border-green p-2 text-center">Green</div>
<div class="border border-teal p-2 text-center">Teal</div>
<div class="border border-cyan p-2 text-center">Cyan</div>