Welcome! To UI Kits

    • map English
    • map Française
    • map English
    • map Русская
    • map Italia
  • 3
Gradient Background
                                     
  <div class="d-flex gap-2 flex-wrap">
    <button class="btn bg-gradient-primary text-white" type="button">
        bg-gradient-primary
    </button>

    <button class="btn bg-gradient-secondary text-white" type="button">
        bg-gradient-secondary
    </button>

    <button class="btn bg-gradient-success text-white" type="button">
        bg-gradient-success
    </button>

    <button class="btn bg-gradient-danger text-white" type="button">
        bg-gradient-danger
    </button>

    <button class="btn bg-gradient-warning text-white" type="button">
        bg-gradient-warning
    </button>

    <button class="btn bg-gradient-info text-white" type="button">
        bg-gradient-info
    </button>

    <button class="btn bg-gradient-light text-dark" type="button">
        bg-gradient-light
    </button>

    <button class="btn bg-gradient-dark text-white" type="button">
        bg-gradient-dark
    </button>
</div>
Solid Background
                                     
  <div class="d-flex gap-2 flex-wrap">
    <button class="btn bg-primary text-white" type="button">bg-primary</button>
    <button class="btn bg-secondary text-white" type="button">bg-secondary</button>
    <button class="btn bg-success text-white" type="button">bg-success</button>
    <button class="btn bg-danger text-white" type="button">bg-danger</button>
    <button class="btn bg-warning text-white" type="button">bg-warning</button>
    <button class="btn bg-info text-white" type="button">bg-info</button>
    <button class="btn bg-light text-dark" type="button">bg-light</button>
    <button class="btn bg-dark text-white" type="button">bg-dark</button>
</div>
Soft Background
                                     
     <div class="d-flex gap-2 flex-wrap">
    <button class="btn bg-light-primary" type="button">bg-light-primary</button>
    <button class="btn bg-light-secondary" type="button">bg-light-secondary</button>
    <button class="btn bg-light-success" type="button">bg-light-success</button>
    <button class="btn bg-light-danger" type="button">bg-light-danger</button>
    <button class="btn bg-light-warning" type="button">bg-light-warning</button>
    <button class="btn bg-light-info" type="button">bg-light-info</button>
    <button class="btn bg-light-light" type="button">bg-light-light</button>
    <button class="btn bg-light-dark" type="button">bg-light-dark</button>
    <button class="btn bg-light-link" type="button">bg-light-link</button>
</div>
Outline Background
                                     
    <div class="d-flex gap-2 flex-wrap">
    <button class="btn bg-outline-primary" type="button">bg-outline-primary</button>
    <button class="btn bg-outline-secondary" type="button">bg-outline-secondary</button>
    <button class="btn bg-outline-success" type="button">bg-outline-success</button>
    <button class="btn bg-outline-danger" type="button">bg-outline-danger</button>
    <button class="btn bg-outline-warning" type="button">bg-outline-warning</button>
    <button class="btn bg-outline-info" type="button">bg-outline-info</button>
    <button class="btn bg-outline-light" type="button">bg-outline-light</button>
    <button class="btn bg-outline-dark" type="button">bg-outline-dark</button>
</div>
Background color shades
                                     
  <div class="d-flex gap-2 flex-wrap">
    <button class="btn bg-primary-900" type="button">bg-primary-900</button>
    <button class="btn bg-primary-800" type="button">bg-primary-800</button>
    <button class="btn bg-primary-700" type="button">bg-primary-700</button>
    <button class="btn bg-primary-600" type="button">bg-primary-600</button>
    <button class="btn bg-primary-500" type="button">bg-primary-500</button>
    <button class="btn bg-primary-400" type="button">bg-primary-400</button>
    <button class="btn bg-primary-300" type="button">bg-primary-300</button>
</div>