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