Background
<div class="card">
<div class="card-header">
<h5>Background colors</h5>
</div>
<div class="card-body d-flex justify-content-between align-items-center">
<div class="d-flex gap-2 flex-wrap">
<button type="button" class="btn bg-primary text-white">bg-primary</button>
<button type="button" class="btn bg-secondary text-white">bg-secondary</button>
<button type="button" class="btn bg-success text-white">bg-success</button>
<button type="button" class="btn bg-danger text-white">bg-danger</button>
<button type="button" class="btn bg-warning text-white">bg-warning</button>
<button type="button" class="btn bg-info text-white">bg-info</button>
<button type="button" class="btn bg-light text-dark">bg-light</button>
<button type="button" class="btn bg-dark text-white">bg-dark</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>Background color shades</h5>
</div>
<div class="card-body d-flex justify-content-between align-items-center">
<div class="d-flex gap-2 flex-wrap">
<button type="button" class="btn bg-primary-900">bg-primary-900</button>
<button type="button" class="btn bg-primary-800">bg-primary-800</button>
<button type="button" class="btn bg-primary-700">bg-primary-700</button>
<button type="button" class="btn bg-primary-600">bg-primary-600</button>
<button type="button" class="btn bg-primary-500">bg-primary-500</button>
<button type="button" class="btn bg-primary-400">bg-primary-400</button>
<button type="button" class="btn bg-primary-300">bg-primary-300</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5> Outline Background</h5>
</div>
<div class="card-body">
<div class="d-flex gap-2 flex-wrap">
<button type="button" class="btn bg-outline-primary">bg-outline-primary</button>
<button type="button" class="btn bg-outline-secondary">bg-outline-secondary</button>
<button type="button" class="btn bg-outline-success">bg-outline-success</button>
<button type="button" class="btn bg-outline-danger">bg-outline-danger</button>
<button type="button" class="btn bg-outline-warning">bg-outline-warning</button>
<button type="button" class="btn bg-outline-info">bg-outline-info</button>
<button type="button" class="btn bg-outline-light">bg-outline-light</button>
<button type="button" class="btn bg-outline-dark">bg-outline-dark</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5> Soft Background</h5>
</div>
<div class="card-body">
<div class="d-flex gap-2 flex-wrap">
<button type="button" class="btn bg-light-primary">bg-light-primary</button>
<button type="button" class="btn bg-light-secondary">bg-light-secondary</button>
<button type="button" class="btn bg-light-success">bg-light-success</button>
<button type="button" class="btn bg-light-danger">bg-light-danger</button>
<button type="button" class="btn bg-light-warning">bg-light-warning</button>
<button type="button" class="btn bg-light-info">bg-light-info</button>
<button type="button" class="btn bg-light-light">bg-light-light</button>
<button type="button" class="btn bg-light-dark">bg-light-dark</button>
<button type="button" class="btn bg-light-link">bg-light-link</button>
</div>
</div>
</div>