Bootstrap Buttons | CORK - Multipurpose Bootstrap Dashboard Template

Default Light Outline Disabled Rounded Sizes Icons Block

Apply .btn-* class followed by .btn class to create default buttons.

<button class="btn btn-primary mb-2 me-4">Primary</button>

<button class="btn btn-info mb-2 me-4">Info</button>

<button class="btn btn-success mb-2 me-4">Success</button>

<button class="btn btn-warning mb-2 me-4">Warning</button>

<button class="btn btn-danger mb-2 me-4">Danger</button>

<button class="btn btn-secondary mb-2 me-4">Secondary</button>

<button class="btn btn-dark mb-2 me-4">Dark</button>

Apply .btn-light-* class followed by .btn class to create light buttons.

<button class="btn btn-light-primary mb-2 me-4">Primary</button>

<button class="btn btn-light-info mb-2 me-4">Info</button>

<button class="btn btn-light-success mb-2 me-4">Success</button>

<button class="btn btn-light-warning mb-2 me-4">Warning</button>

<button class="btn btn-light-danger mb-2 me-4">Danger</button>

<button class="btn btn-light-secondary mb-2 me-4">Secondary</button>

<button class="btn btn-light-dark mb-2 me-4">Dark</button>

Apply .btn-outline-* class followed by .btn class to create outline buttons.

<button class="btn btn-outline-primary mb-2 me-4">Primary</button>

<button class="btn btn-outline-info mb-2 me-4">Info</button>

<button class="btn btn-outline-success mb-2 me-4">Success</button>

<button class="btn btn-outline-warning mb-2 me-4">Warning</button>

<button class="btn btn-outline-danger mb-2 me-4">Danger</button>

<button class="btn btn-outline-secondary mb-2 me-4">Secondary</button>

<button class="btn btn-outline-dark mb-2 me-4">Dark</button>

Use disabled attribute to create Disabled buttons.

<button class="btn btn-primary mb-2 me-4" disabled>Primary</button>

<button class="btn btn-info mb-2 me-4" disabled>Info</button>

<button class="btn btn-success mb-2 me-4" disabled>Success</button>

<button class="btn btn-warning mb-2 me-4" disabled>Warning</button>

<button class="btn btn-danger mb-2 me-4" disabled>Danger</button>

<button class="btn btn-secondary mb-2 me-4" disabled>Secondary</button>

<button class="btn btn-dark mb-2 me-4" disabled>Dark</button>

Use .btn-rounded to make buttons rounded.

<!-- Default -->

<button class="btn btn-primary btn-rounded mb-2 me-4">Primary</button>

<button class="btn btn-info btn-rounded mb-2 me-4">Info</button>

<button class="btn btn-success btn-rounded mb-2 me-4">Success</button>

<button class="btn btn-warning btn-rounded mb-2 me-4">Warning</button>

<button class="btn btn-danger btn-rounded mb-2 me-4">Danger</button>

<button class="btn btn-secondary btn-rounded mb-2 me-4">Secondary</button>

<button class="btn btn-dark btn-rounded mb-2 me-4">Dark</button>

<!-- Outline -->

<button class="btn btn-outline-primary btn-rounded mb-2 me-4">Primary</button>

<button class="btn btn-outline-info btn-rounded mb-2 me-4">Info</button>

<button class="btn btn-outline-success btn-rounded mb-2 me-4">Success</button>

<button class="btn btn-outline-warning btn-rounded mb-2 me-4">Warning</button>

<button class="btn btn-outline-danger btn-rounded mb-2 me-4">Danger</button>

<button class="btn btn-outline-secondary btn-rounded mb-2 me-4">Secondary</button>

<button class="btn btn-outline-dark btn-rounded mb-2 me-4">Dark</button>

<!-- Default -->

<button class="btn btn-primary  mb-2 me-4 btn-lg">Large button</button>

<button class="btn btn-secondary  mb-2 me-4">Default button</button>

<button class="btn btn-warning  mb-2 me-4 btn-sm">Small button</button>

<button class="btn btn-dark  mb-2 me-4 btn-sm disabled">Disabled Button</button>

<!-- Outline -->

<button class="btn btn-outline-primary  mb-2 me-4 btn-lg">Large button</button>

<button class="btn btn-outline-secondary  mb-2 me-4">Default button</button>

<button class="btn btn-outline-warning  mb-2 me-4 btn-sm">Small button</button>

<button class="btn btn-outline-dark  mb-2 me-4 btn-sm disabled">Disabled Button</button>

<!-- Default -->

<button class="btn btn-success  mb-2 me-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
    <span class="btn-text-inner">Button</span>
</button>

<button class="btn btn-success btn-icon mb-2 me-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</button>

<button class="btn btn-success btn-icon mb-2 me-4 btn-rounded">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
</button>

<button class="btn btn-success  mb-2" disabled>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
    <span class="btn-text-inner">Button</span>
</button>

<!-- Outline -->

<button class="btn btn-outline-success  mb-2 me-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
    <span class="btn-text-inner">Button</span>
</button>

<button class="btn btn-outline-success btn-icon mb-2 me-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
</button>

<button class="btn btn-outline-success btn-icon mb-2 me-4 btn-rounded">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
</button>

<button class="btn btn-outline-success" disabled>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
    <span class="btn-text-inner">Button</span>
</button>

<div class="d-grid gap-2 col-6 mx-auto">
    <!-- Default -->
    <button class="btn btn-secondary mb-4" type="button">Default</button>
    <!-- Outline -->
    <button class="btn btn-outline-secondary mb-4" type="button">Outline</button>
    <!-- Disabled -->
    <button class="btn btn-secondary mb-4" type="button" disabled>Disabled</button>
</div>

Default

Light

Outline

Disabled

Rounded

Button Sizes

Button with Icons

Block Buttons

Kara Young

Daisy Anderson

Oscar Garner

Server Rebooted

Kelly Portfolio.pdf

Licence Expiring Soon