colors

Bootstrap 5 offers a wide range of color utilities that allow you to style text, backgrounds, borders, and components. These colors are consistent across components, ensuring a uniform look throughout your site.

Text Colors
Background Colors
Background color with contrasting text
Border Colors

Text Color:

You can apply text color with these classes:.text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-muted, .text-white

Example

<p class="text-primary">Primary text</p>

<p class="text-success">Success text</p>

<p class="text-secondary">Secondary text</p>

<p class="text-danger">Danger text</p>

<p class="text-warning">Warning text</p>

<p class="text-light">Light text</p>

<p class="text-muted">Muted text</p>

<p class="text-white">White text</p>

Try it yourself

Background Colors

Background color utilities help you style backgrounds using the same color scheme.

Primary Colors: bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, and bg-white.

Example

<div class="bg-primary text-white p-3">Primary background</div>

<div class="bg-secondary text-white p-3">Secondary background</div>

<div class="bg-success text-white p-3">Success background</div>

<div class="bg-danger text-white p-3">Danger background</div>

<div class="bg-warning text-dark p-3">Warning background</div>

<div class="bg-info text-dark p-3">Info background</div>

<div class="bg-light text-dark p-3">Light background</div>

<div class="bg-dark text-white p-3">Dark background</div>

<div class="bg-white text-dark p-3">White background</div>

Try it yourself

Background Color with Contrasting text color

These classes combine both text color and background color to ensure better readability and contrast, making it easy to style text without needing separate text and background classes

Primary Colors: text-bg-primary, text-bg-secondary, text-bg-success, text-bg-danger, text-bg-warning, text-bg-info, text-bg-light, text-bg-dark, and text-bg-white.

Example

<div class="text-bg-primary p-3">Primary background</div>

<div class="text-bg-secondary p-3">Secondary background</div>

<div class="text-bg-success p-3">Success background</div>

<div class="text-bg-danger p-3">Danger background</div>

<div class="text-bg-warning p-3">Warning background</div>

<div class="text-bg-info p-3">Info background</div>

<div class="text-bg-light p-3">Light background</div>

<div class="text-bg-dark p-3">Dark background</div>

<div class="text-bg-white p-3">White background</div>

Try it yourself

Border color:

These classes allow you to add colored borders to any element with minimal code

Primary Colors: border-primary, border-secondary, border-success, border-danger, border-warning, border-info, border-light, border-dark, and border-white.

Example

<div class="border border-primary p-1 m-1">Primary border</div>

<div class="border border-secondary p-1 m-1">Secondary border</div>

<div class="border border-success p-1 m-1">Success border</div>

<div class="border border-danger p-1 m-1">Danger border</div>

<div class="border border-warning p-1 m-1">Warning border</div>

<div class="border border-info p-1 m-1">Info border</div>

<div class="border border-light p-1 m-1">Light border</div>

<div class="border border-dark p-1 m-1">Dark border</div>

<div class="border border-white bg-dark text-white p-1 m-1">White border on dark background</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.