Clip Board

Basic Chips


<button class="btn btn-primary text-white rounded-pill">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Primary</span>
    </div>
</button>
<button class="btn btn-secondary text-white rounded-pill">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Secondary</span>
    </div>
</button>
<button class="btn btn-success text-white rounded-pill">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Success</span>
    </div>
</button>
<button class="btn btn-danger text-white rounded-pill">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Danger</span>
    </div>
</button>
<button class="btn btn-warning text-white rounded-pill">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Warning</span>
    </div>
</button>
<button class="btn btn-info text-white rounded-pill">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Info</span>
    </div>
</button>
<button class="btn btn-light text-white rounded-pill">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Light</span>
    </div>
</button>
<button class="btn btn-dark text-white rounded-pill">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Dark</span>
    </div>
</button>

Basic Chips With Icon Style


<button class="btn btn-primary text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Primary</span>
    </div>
</button>
<button class="btn btn-secondary text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Secondary</span>
    </div>
</button>
<button class="btn btn-success text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Success</span>
    </div>
</button>
<button class="btn btn-danger text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Danger</span>
    </div>
</button>
<button class="btn btn-warning text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Warning</span>
    </div>
</button>
<button class="btn btn-info text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Info</span>
    </div>
</button>
<button class="btn btn-light text-white rounded-pill px-2">
    <div class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle">
        <i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Light</span>
    </div>
</button>
<button class="btn btn-dark text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Dark</span>
    </div>
</button>

Chips With Image


<button class="btn btn-primary text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-1.jpg" class="rounded-circle wh-25" alt="user">
        <span class="ms-1">Primary</span>
    </div>
</button>
<button class="btn btn-secondary text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-2.jpg" class="rounded-circle wh-25" alt="user">
        <span class="ms-1">Secondary</span>
    </div>
</button>
<button class="btn btn-success text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-3.jpg" class="rounded-circle wh-25" alt="user">
        <span class="ms-1">Success</span>
    </div>
</button>
<button class="btn btn-danger text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-4.jpg" class="rounded-circle wh-25" alt="user">
        <span class="ms-1">Danger</span>
    </div>
</button>
<button class="btn btn-warning text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-5.jpg" class="rounded-circle wh-25" alt="user">
        <span class="ms-1">Warning</span>
    </div>
</button>
<button class="btn btn-info text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-6.jpg" class="rounded-circle wh-25" alt="user">
        <span class="ms-1">Info</span>
    </div>
</button>
<button class="btn btn-light text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-7.jpg" class="rounded-circle wh-25" alt="user">
        <span class="ms-1">Light</span>
    </div>
</button>
<button class="btn btn-dark text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-8.jpg" class="rounded-circle wh-25" alt="user">
        <span class="ms-1">Dark</span>
    </div>
</button>

Chips With Image & Border


<button class="btn btn-primary text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-1.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Primary</span>
    </div>
</button>
<button class="btn btn-secondary text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-2.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Secondary</span>
    </div>
</button>
<button class="btn btn-success text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-3.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Success</span>
    </div>
</button>
<button class="btn btn-danger text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-4.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Danger</span>
    </div>
</button>
<button class="btn btn-warning text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-5.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Warning</span>
    </div>
</button>
<button class="btn btn-info text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-6.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Info</span>
    </div>
</button>
<button class="btn btn-light text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-7.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Light</span>
    </div>
</button>
<button class="btn btn-dark text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-8.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Dark</span>
    </div>
</button>

Chips All Style


<button class="btn btn-primary text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-home-4-line text-white"></i>
        <span class="ms-1">Primary</span>
    </div>
</button>
<button class="btn btn-secondary text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <img src="assets/images/user-2.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
        <span class="ms-1">Secondary</span>
    </div>
</button>
<button class="btn btn-success text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-check-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Success</span>
    </div>
</button>
<button class="btn btn-danger text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <i class="ri-close-line wh-25 bg-white text-primary fs-16 rounded-circle"></i>
        <span class="ms-1">Danger</span>
    </div>
</button>
<button class="btn btn-warning text-white rounded-pill px-2">
    <div class="d-flex align-items-center">
        <span class="me-2">Warning</span>
        <img src="assets/images/user-5.jpg" class="rounded-circle wh-25 border border-2 border-white" alt="user">
    </div>
</button>