xxxxxxxxxx
<div class="bg-primary">bg-primary</div>
<div class="bg-secondary">bg-secondary</div>
<div class="bg-success">bg-success</div>
<div class="bg-danger">bg-danger</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-info">bg-info</div>
<div class="bg-light">bg-light</div>
<div class="bg-dark">bg-dark</div>
<div class="bg-body">bg-body</div>
<div class="bg-white">bg-white</div>
<div class="bg-transparent">bg-transparent</div>
xxxxxxxxxx
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
xxxxxxxxxx
primary - #007bff
secondary - #6c757d
success - #28a745
danger - #dc3545
warning - #ffc107
info - #17a2b8
light - #f8f9fa
dark - #343a40
muted - #6c757d
white - #ffffff
xxxxxxxxxx
<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 bg-dark">text-light</p>
<p class="text-dark">text-dark</p>
<p class="text-muted">text-muted</p>
<p class="text-white bg-dark">text-white</p>
xxxxxxxxxx
<p class="text-primary">Text with primary color</p>
<p class="text-secondary">Text with secondary color</p>
<p class="text-success">Text with success color</p>
<p class="text-danger">Text with danger color</p>
<p class="text-warning">Text with warning color</p>
<p class="text-info">Text with info color</p>
<p class="text-light bg-dark">Text with light color</p>
<p class="text-dark">Text with dark color</p>
<p class="text-muted">Text with muted color</p>
<p class="text-white bg-dark">Text with white color</p>
xxxxxxxxxx
<!-- On rows -->
<tr class="bg-primary"></tr>
<tr class="bg-success"></tr>
<tr class="bg-warning"></tr>
<tr class="bg-danger"></tr>
<tr class="bg-info"></tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary"></td>
<td class="bg-success"></td>
<td class="bg-warning"></td>
<td class="bg-danger"></td>
<td class="bg-info"></td>
</tr>
xxxxxxxxxx
<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 bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
xxxxxxxxxx
<!-- On rows -->
<tr class="bg-primary"></tr>
<tr class="bg-success"></tr>
<tr class="bg-warning"></tr>
<tr class="bg-danger"></tr>
<tr class="bg-info"></tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary"></td>
<td class="bg-success"></td>
<td class="bg-warning"></td>
<td class="bg-danger"></td>
<td class="bg-info"></td>
</tr>
xxxxxxxxxx
<!-- Include Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Customize primary and secondary colors -->
<style>
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
</style>
<!-- Use custom colors in Bootstrap components -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<!-- Other Bootstrap components with custom colors -->
<div class="alert alert-primary" role="alert">
This is a primary alert!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert!
</div>