WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Colors

Previous Next

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 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-info">Info text</p>
<p class="text-light">Light text</p>
<p class="text-dark">Dark 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 need to 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