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