Buttons

Use Bootstrap’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(Tonal) 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

<button type="button" class="btn btn-primary me-2">
  <span class="tf-icons ri-checkbox-circle-line ri-16px me-2"></span> Primary
</button>
<button type="button" class="btn btn-secondary me-2">
  <span class="tf-icons ri-notification-4-line ri-16px me-2"></span> Secondary
</button>
<button type="button" class="btn btn-label-primary me-2">
  <span class="tf-icons ri-checkbox-circle-line ri-16px me-2"></span> Primary
</button>
<button type="button" class="btn btn-label-secondary me-2">
  <span class="tf-icons ri-notification-4-line ri-16px me-2"></span> Secondary
</button>
<button type="button" class="btn btn-outline-primary me-2">
  <span class="tf-icons ri-checkbox-circle-line ri-16px me-2"></span> Primary
</button>
<button type="button" class="btn btn-outline-secondary me-2">
  <span class="tf-icons ri-notification-4-line ri-16px me-2"></span> Secondary
</button>

Icon Only

Make icon buttons by adding only icon and add class .btn-icon. Use any icon as per your preference.

<button type="button" class="btn btn-icon me-2 btn-primary">
  <span class="tf-icons ri-checkbox-circle-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-secondary">
  <span class="tf-icons ri-notification-4-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-label-primary">
  <span class="tf-icons ri-checkbox-circle-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-label-secondary">
  <span class="tf-icons ri-notification-4-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-outline-primary">
  <span class="tf-icons ri-checkbox-circle-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-outline-secondary">
  <span class="tf-icons ri-notification-4-line ri-22px"></span>
</button>

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>

Checkbox and radio button groups

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
© 2017- Pixinvent, Hand-crafted & Made with ❤️