Colors - Bootstrap Design System

Theme Colors

Bootstrap includes eight theme colors for consistent styling across your application.

Primary

.bg-primary
.text-primary
.btn-primary

Secondary

.bg-secondary
.text-secondary
.btn-secondary

Success

.bg-success
.text-success
.btn-success

Danger

.bg-danger
.text-danger
.btn-danger

Warning

.bg-warning
.text-warning
.btn-warning

Info

.bg-info
.text-info
.btn-info

Light

.bg-light
.text-light
.btn-light

Dark

.bg-dark
.text-dark
.btn-dark

Background Colors

Apply background colors to any element using the .bg-* utility classes.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-body (default)

.bg-white

.bg-transparent

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-dark">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>

Text Colors

Change text color with the .text-* utility classes.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning (on dark bg)

.text-info (on dark bg)

.text-light (on dark bg)

.text-dark

.text-body

.text-muted

.text-black

.text-white (on dark bg)

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>

Text Color with Links

<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-secondary">Secondary link</a>
<a href="#" class="text-success">Success link</a>

Background Gradients

Add .bg-gradient to any background color for a gradient effect.

.bg-primary.bg-gradient

.bg-secondary.bg-gradient

.bg-success.bg-gradient

.bg-danger.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-dark.bg-gradient

<div class="bg-primary bg-gradient text-white">Gradient background</div>
<div class="bg-success bg-gradient text-white">Gradient background</div>
<div class="bg-danger bg-gradient text-white">Gradient background</div>

Subtle Backgrounds

Use subtle background variants for less prominent elements.

.bg-primary-subtle

.bg-secondary-subtle

.bg-success-subtle

.bg-danger-subtle

.bg-warning-subtle

.bg-info-subtle

.bg-light-subtle

.bg-dark-subtle

<div class="bg-primary-subtle text-primary-emphasis">Subtle primary</div>
<div class="bg-success-subtle text-success-emphasis">Subtle success</div>
<div class="bg-danger-subtle text-danger-emphasis">Subtle danger</div>

Border Colors

Apply border colors using .border-* utility classes.

.border-primary

.border-secondary

.border-success

.border-danger

.border-warning

.border-info

.border-light

.border-dark

.border-white

<div class="border border-primary">Primary border</div>
<div class="border border-success">Success border</div>
<div class="border border-danger">Danger border</div>

Border Width

.border-1

.border-2

.border-3

.border-4

.border-5

<div class="border border-primary border-1">1px border</div>
<div class="border border-primary border-2">2px border</div>
<div class="border border-primary border-3">3px border</div>
<div class="border border-primary border-4">4px border</div>
<div class="border border-primary border-5">5px border</div>

Opacity

Control the opacity of backgrounds and text with opacity utilities.

Background Opacity

.bg-opacity-100

.bg-opacity-75

.bg-opacity-50

.bg-opacity-25

.bg-opacity-10

<div class="bg-primary bg-opacity-100">100% opacity</div>
<div class="bg-primary bg-opacity-75">75% opacity</div>
<div class="bg-primary bg-opacity-50">50% opacity</div>
<div class="bg-primary bg-opacity-25">25% opacity</div>
<div class="bg-primary bg-opacity-10">10% opacity</div>

Text Opacity

Text with 100% opacity

Text with 75% opacity

Text with 50% opacity

Text with 25% opacity

<p class="text-white text-opacity-100">100% opacity</p>
<p class="text-white text-opacity-75">75% opacity</p>
<p class="text-white text-opacity-50">50% opacity</p>
<p class="text-white text-opacity-25">25% opacity</p>