#### Background

##### Background colors

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

##### Background color shades

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

##### Outline Background

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

##### Soft Background

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