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>
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
<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>