Button

Use this template’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Basic Buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. 

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
Class Value
class="btn btn-{value}" primary | secondary | success | danger | warning | info | dark

Label Buttons

In need of a button, but with light background colors? Replace the default modifier classes with the .btn-label-*. 

<button type="button" class="btn btn-label-primary">Primary</button>
<button type="button" class="btn btn-label-secondary">Secondary</button>
<button type="button" class="btn btn-label-success">Success</button>
<button type="button" class="btn btn-label-danger">Danger</button>
<button type="button" class="btn btn-label-warning">Warning</button>
<button type="button" class="btn btn-label-info">Info</button>
<button type="button" class="btn btn-label-dark">Dark</button>
Class Value
class="btn btn-label-{value}" primary | secondary | success | danger | warning | info | dark

Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button. 

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Class Value
class="btn btn-outline-{value}" primary | secondary | success | danger | warning | info | dark

Text Buttons

In need of a button, but not the hefty background and border colors they bring? Replace the default modifier classes with the .btn-text-* ones to remove all background images and colors on any button. 

<button type="button" class="btn btn-text-primary">Primary</button>
<button type="button" class="btn btn-text-secondary">Secondary</button>
<button type="button" class="btn btn-text-success">Success</button>
<button type="button" class="btn btn-text-danger">Danger</button>
<button type="button" class="btn btn-text-warning">Warning</button>
<button type="button" class="btn btn-text-info">Info</button>
<button type="button" class="btn btn-text-dark">Dark</button>
Class Value
class="btn btn-text-{value}" primary | secondary | success | danger | warning | info | dark

Rounded Button

Just add extra class .rounded-pill to create rounded buttons.

<button type="button" class="btn rounded-pill me-2 btn-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-dark">Dark</button>

<button type="button" class="btn rounded-pill me-2 btn-label-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-label-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-label-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-label-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-label-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-label-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-label-dark">Dark</button>

<button type="button" class="btn rounded-pill me-2 btn-outline-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-dark">Dark</button>

Icon Buttons

Icon Default
<div class="row row-bordered g-0">
    <div class="col-xl-6 p-4">
        <h6>Basic</h6>
        <div class="demo-inline-spacing">
            <p>
                <span class="badge badge-center rounded-pill bg-primary">1</span>
                <span class="badge badge-center rounded-pill bg-secondary">1</span>
            </p>
            <p>
                <span class="badge badge-center bg-primary">1</span>
                <span class="badge badge-center bg-secondary">1</span>
            </p>
        </div>
    </div>
    <div class="col-xl-6 p-4">
        <h6>Label</h6>
        <div class="demo-inline-spacing">
            <p>
                <span class="badge badge-center rounded-pill bg-label-primary">1</span>
                <span class="badge badge-center rounded-pill bg-label-secondary">1</span>
            </p>
            <p>
                <span class="badge badge-center bg-label-primary">1</span>
                <span class="badge badge-center bg-label-secondary">1</span>
            </p>
        </div>
    </div>
</div>
Icon Only
<div class="row row-bordered g-0">
    <div class="col-xl-6 p-4">
        <h6>Basic</h6>
        <div class="demo-inline-spacing">
            <p>
                <span class="badge badge-center rounded-pill bg-primary">1</span>
                <span class="badge badge-center rounded-pill bg-secondary">1</span>
            </p>
            <p>
                <span class="badge badge-center bg-primary">1</span>
                <span class="badge badge-center bg-secondary">1</span>
            </p>
        </div>
    </div>
    <div class="col-xl-6 p-4">
        <h6>Label</h6>
        <div class="demo-inline-spacing">
            <p>
                <span class="badge badge-center rounded-pill bg-label-primary">1</span>
                <span class="badge badge-center rounded-pill bg-label-secondary">1</span>
            </p>
            <p>
                <span class="badge badge-center bg-label-primary">1</span>
                <span class="badge badge-center bg-label-secondary">1</span>
            </p>
        </div>
    </div>
</div>
Class Value
class="badge badge-center bg-{value}" primary | secondary | success | danger | warning | info | dark

Social Buttons

Create social icons by using respective social media class as mentioned in below table.

You can also create rounded social buttons by using .rounded-pill class, label social button by using .btn-label-{value} class, outline social buttons by using .btn-outline-{value} class and text social buttons by using .btn-text-{value} class. 

<button type="button" class="btn btn-facebook">
  <i class="tf-icons ri-facebook-fill ri-16px me-2"></i> Facebook
</button>
<button type="button" class="btn btn-twitter">
  <i class="tf-icons ri-twitter-fill ri-16px me-2"></i> Twitter
</button>
<button type="button" class="btn btn-google-plus">
  <i class="tf-icons ri-google-fill ri-16px me-2"></i> Google+
</button>
<button type="button" class="btn btn-instagram">
  <i class="tf-icons ri-instagram-line ri-16px me-2"></i> Instagram
</button>
<button type="button" class="btn btn-linkedin">
  <i class="tf-icons ri-linkedin-box-fill ri-16px me-2"></i> Linkedin
</button>
<button type="button" class="btn btn-github">
  <i class="tf-icons ri-github-fill ri-16px me-2"></i> Github
</button>
<button type="button" class="btn btn-whatsapp">
  <i class="tf-icons ri-whatsapp-line ri-16px me-2"></i> WhatsApp
</button>
<button type="button" class="btn btn-pinterest">
  <i class="tf-icons ri-pinterest-fill ri-16px me-2"></i> Pinterest
</button>
<button type="button" class="btn btn-slack">
  <i class="tf-icons ri-slack-line ri-16px me-2"></i> Slack
</button>
<button type="button" class="btn btn-reddit">
  <i class="tf-icons ri-reddit-fill ri-16px me-2"></i> Reddit
</button>
<button type="button" class="btn btn-youtube">
  <i class="tf-icons ri-youtube-fill ri-16px me-2"></i> Youtube
</button>
<button type="button" class="btn btn-vimeo">
  <i class="tf-icons ri-vimeo-fill ri-16px me-2"></i> Vimeo
</button>
Class Value
class="btn btn-{value}" facebook | twitter | google-plus | instagram | linkedin | github | whatsapp | pinterest | slack | reddit | youtube | vimeo

Size

Fancy larger or smaller buttons? Add .btn-xl, .btn-lg, .btn-sm or .btn-xs for additional sizes. 

<button type="button" class="btn btn-xl btn-primary">Button xl</button>
<button type="button" class="btn btn-lg btn-primary">Button lg</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-sm btn-primary">Button sm</button>
<button type="button" class="btn btn-xs btn-primary">Button xs</button>
Class Value
class="btn btn-primary btn-{value}" xl | lg | sm | xs

Block Buttons

Create responsive stacks of full-width, “block buttons” with a mix of our display and gap utilities. 

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary btn-lg" type="button">Button</button>
  <button class="btn btn-secondary btn-lg" type="button">Button</button>
</div>

Active States

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to buttons as they use a pseudo-class.

However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically. 

<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a>

Disabled States

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Link 
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Button Plugin

The button plugin allows you to create simple on/off toggle buttons.

Toggle States

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies. 

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Toggle Buttons

Create button-like checkboxes and radio buttons by using .btn styles rather than .form-check-label on the <label> elements. These toggle buttons can further be grouped in a button group if needed. 

<div class="d-block">
  <input type="checkbox" class="btn-check" id="btn-check">
  <label class="btn btn-primary" for="btn-check">Single toggle</label>
</div>
<div class="d-block">
  <input type="checkbox" class="btn-check" id="btn-check-2" checked>
  <label class="btn btn-primary" for="btn-check-2">Checked</label>
</div>
<div class="d-block">
  <input type="checkbox" class="btn-check" id="btn-check-3" checked>
  <label class="btn btn-primary" for="btn-check-3">Checked</label>
</div>