Documentation

Browse source code
On this page

Buttons

Bootstrap documentation

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Button tag

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link 
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input"/>
<input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-primary" value="Reset"/>

Button variations

Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.

Primary Secondary Success Warning Danger Info Light Dark Link 
<a href="#" class="btn btn-primary">
  Primary
</a>
<a href="#" class="btn btn-secondary">
  Secondary
</a>
<a href="#" class="btn btn-success">
  Success
</a>
<a href="#" class="btn btn-warning">
  Warning
</a>
<a href="#" class="btn btn-danger">
  Danger
</a>
<a href="#" class="btn btn-info">
  Info
</a>
<a href="#" class="btn btn-light">
  Light
</a>
<a href="#" class="btn btn-dark">
  Dark
</a>
<a href="#" class="btn btn-link">
  Link
</a>

Disabled buttons

Make buttons look inactive by adding the disabled boolean attribute to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Primary Secondary Success Warning Danger Info Light Dark Link 
<a href="#" class="btn btn-primary disabled">
  Primary
</a>
<a href="#" class="btn btn-secondary disabled">
  Secondary
</a>
<a href="#" class="btn btn-success disabled">
  Success
</a>
<a href="#" class="btn btn-warning disabled">
  Warning
</a>
<a href="#" class="btn btn-danger disabled">
  Danger
</a>
<a href="#" class="btn btn-info disabled">
  Info
</a>
<a href="#" class="btn btn-light disabled">
  Light
</a>
<a href="#" class="btn btn-dark disabled">
  Dark
</a>
<a href="#" class="btn btn-link disabled">
  Link
</a>

Color variations

The classic button, in different colors.

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan Gray 
<a href="#" class="btn btn-blue">Blue</a>
<a href="#" class="btn btn-azure">Azure</a>
<a href="#" class="btn btn-indigo">Indigo</a>
<a href="#" class="btn btn-purple">Purple</a>
<a href="#" class="btn btn-pink">Pink</a>
<a href="#" class="btn btn-red">Red</a>
<a href="#" class="btn btn-orange">Orange</a>
<a href="#" class="btn btn-yellow">Yellow</a>
<a href="#" class="btn btn-lime">Lime</a>
<a href="#" class="btn btn-green">Green</a>
<a href="#" class="btn btn-teal">Teal</a>
<a href="#" class="btn btn-cyan">Cyan</a>
<a href="#" class="btn btn-gray">Gray</a>

Ghost Buttons

Use .btn-ghost-* class for ghost buttons.

Primary Secondary Success Warning Danger Info Light Dark Link 
<a href="#" class="btn btn-ghost-primary">Primary</a>
<a href="#" class="btn btn-ghost-secondary">Secondary</a>
<a href="#" class="btn btn-ghost-success">Success</a>
<a href="#" class="btn btn-ghost-warning">Warning</a>
<a href="#" class="btn btn-ghost-danger">Danger</a>
<a href="#" class="btn btn-ghost-info">Info</a>
<a href="#" class="btn btn-ghost-light">Light</a>
<a href="#" class="btn btn-ghost-dark">Dark</a>
<a href="#" class="btn btn-ghost-link">Link</a>

Square buttons

Add .btn-square to button to remove border-radius.

Primary Secondary Success Warning Danger Info Light Dark Link 
<a href="#" class="btn btn-primary btn-square">
  Primary
</a>
<a href="#" class="btn btn-secondary btn-square">
  Secondary
</a>
<a href="#" class="btn btn-success btn-square">
  Success
</a>
<a href="#" class="btn btn-warning btn-square">
  Warning
</a>
<a href="#" class="btn btn-danger btn-square">
  Danger
</a>
<a href="#" class="btn btn-info btn-square">
  Info
</a>
<a href="#" class="btn btn-light btn-square">
  Light
</a>
<a href="#" class="btn btn-dark btn-square">
  Dark
</a>
<a href="#" class="btn btn-link btn-square">
  Link
</a>

Pill buttons

Add .btn-pill class to any button to make them more rounded.

Primary Secondary Success Warning Danger Info Light Dark Link 
<a href="#" class="btn btn-primary btn-pill">
  Primary
</a>
<a href="#" class="btn btn-secondary btn-pill">
  Secondary
</a>
<a href="#" class="btn btn-success btn-pill">
  Success
</a>
<a href="#" class="btn btn-warning btn-pill">
  Warning
</a>
<a href="#" class="btn btn-danger btn-pill">
  Danger
</a>
<a href="#" class="btn btn-info btn-pill">
  Info
</a>
<a href="#" class="btn btn-light btn-pill">
  Light
</a>
<a href="#" class="btn btn-dark btn-pill">
  Dark
</a>
<a href="#" class="btn btn-link btn-pill">
  Link
</a>

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.

Primary Secondary Success Warning Danger Info Light Dark Link 
<a href="#" class="btn btn-outline-primary">
  Primary
</a>
<a href="#" class="btn btn-outline-secondary">
  Secondary
</a>
<a href="#" class="btn btn-outline-success">
  Success
</a>
<a href="#" class="btn btn-outline-warning">
  Warning
</a>
<a href="#" class="btn btn-outline-danger">
  Danger
</a>
<a href="#" class="btn btn-outline-info">
  Info
</a>
<a href="#" class="btn btn-outline-light">
  Light
</a>
<a href="#" class="btn btn-outline-dark">
  Dark
</a>
<a href="#" class="btn btn-outline-link">
  Link
</a>

Button size

Add .btn-lg or .btn-sm for additional sizes.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>

Button with icon

Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.

Icons can be found here

<button type="button" class="btn btn-dark">
  <!-- SVG icon code -->
  Upload
</button>
<button type="button" class="btn btn-warning">
  <!-- SVG icon code -->
  I like
</button>
<button type="button" class="btn btn-success">
  <!-- SVG icon code -->
  I agree
</button>
<button type="button" class="btn btn-outline-primary">
  <!-- SVG icon code -->
  More
</button>
<button type="button" class="btn btn-danger">
  <!-- SVG icon code -->
  Link
</button>
<button type="button" class="btn btn-info">
  <!-- SVG icon code -->
  Comment
</button>

Social buttons

A button can be formatted to link to a social website

Facebook Twitter Google Youtube Vimeo Dribbble Github Instagram Pinterest VK RSS Flickr Bitbucker Tabler 
<a href="#" class="btn btn-facebook">
  <!-- SVG icon code -->
  Facebook
</a>
<a href="#" class="btn btn-twitter">
  <!-- SVG icon code -->
  Twitter
</a>
<a href="#" class="btn btn-google">
  <!-- SVG icon code -->
  Google
</a>
<a href="#" class="btn btn-youtube">
  <!-- SVG icon code -->
  Youtube
</a>
<a href="#" class="btn btn-vimeo">
  <!-- SVG icon code -->
  Vimeo
</a>
<a href="#" class="btn btn-dribbble">
  <!-- SVG icon code -->
  Dribbble
</a>
<a href="#" class="btn btn-github">
  <!-- SVG icon code -->
  Github
</a>
<a href="#" class="btn btn-instagram">
  <!-- SVG icon code -->
  Instagram
</a>
<a href="#" class="btn btn-pinterest">
  <!-- SVG icon code -->
  Pinterest
</a>
<a href="#" class="btn btn-vk">
  <!-- SVG icon code -->
  VK
</a>
<a href="#" class="btn btn-rss">
  <!-- SVG icon code -->
  RSS
</a>
<a href="#" class="btn btn-flickr">
  <!-- SVG icon code -->
  Flickr
</a>
<a href="#" class="btn btn-bitbucket">
  <!-- SVG icon code -->
  Bitbucker
</a>
<a href="#" class="btn btn-tabler">
  <!-- SVG icon code -->
  Tabler
</a>

You can use only icons.

<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-google btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-vk btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-rss btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>

Icon buttons

Icon only button. Add .btn-icon class to remove unnecessary padding from button.

<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-success btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-warning btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-danger btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-purple btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>
<a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
  <!-- SVG icon code -->
</a>

Button dropdown

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

Action Another action
Action Another action
Action Another action 
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
    <!-- SVG icon code -->
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">
      Action
    </a>
    <a class="dropdown-item" href="#">
      Another action
    </a>
  </div>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
    <!-- SVG icon code -->
    Show calendar
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">
      Action
    </a>
    <a class="dropdown-item" href="#">
      Another action
    </a>
  </div>
</div>
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
    Show calendar
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">
      Action
    </a>
    <a class="dropdown-item" href="#">
      Another action
    </a>
  </div>
</div>

Loading button

Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside.

Button Loading button with loooong content 
<a href="#" class="btn btn-primary btn-loading">
  Button
</a>
<a href="#" class="btn btn-primary btn-loading">
  Loading button with loooong content
</a>
Button 
<a href="#" class="btn btn-primary">
  <span class="spinner-border spinner-border-sm mr-2" role="status"></span>
  Button
</a>

List of buttons

You can now create a list of buttons with the .btn-list container.

Save changes Save and continue Cancel 
<div class="btn-list">
  <a href="#" class="btn btn-success">Save changes</a>
  <a href="#" class="btn btn-secondary">Save and continue</a>
  <a href="#" class="btn btn-danger">Cancel</a>
</div>

If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen 
<div class="btn-list">
  <a href="#" class="btn btn-secondary">One</a>
  <a href="#" class="btn btn-secondary">Two</a>
  <a href="#" class="btn btn-secondary">Three</a>
  <a href="#" class="btn btn-secondary">Four</a>
  <a href="#" class="btn btn-secondary">Five</a>
  <a href="#" class="btn btn-secondary">Six</a>
  <a href="#" class="btn btn-secondary">Seven</a>
  <a href="#" class="btn btn-secondary">Eight</a>
  <a href="#" class="btn btn-secondary">Nine</a>
  <a href="#" class="btn btn-secondary">Ten</a>
  <a href="#" class="btn btn-secondary">Eleven</a>
  <a href="#" class="btn btn-secondary">Twelve</a>
  <a href="#" class="btn btn-secondary">Thirteen</a>
  <a href="#" class="btn btn-secondary">Fourteen</a>
  <a href="#" class="btn btn-secondary">Fifteen</a>
  <a href="#" class="btn btn-secondary">Sixteen</a>
  <a href="#" class="btn btn-secondary">Seventeen</a>
  <a href="#" class="btn btn-secondary">Eighteen</a>
  <a href="#" class="btn btn-secondary">Nineteen</a>
</div>

Use the .text-center or the .text-right modifiers to alter the alignment.

Save and continue Save changes 
<div class="btn-list justify-content-center">
  <a href="#" class="btn btn-secondary">Save and continue</a>
  <a href="#" class="btn btn-primary">Save changes</a>
</div>
Save and continue Save changes 
<div class="btn-list justify-content-end">
  <a href="#" class="btn btn-secondary">Save and continue</a>
  <a href="#" class="btn btn-primary">Save changes</a>
</div>
Delete Save and continue Save changes 
<div class="btn-list">
  <a href="#" class="btn btn-outline-danger mr-auto">Delete</a>
  <a href="#" class="btn btn-secondary">Save and continue</a>
  <a href="#" class="btn btn-primary">Save changes</a>
</div>

Button with avatar

Avatar Avatar Avatar 
<a href="#" class="btn btn-secondary">
  <span class="avatar" style="background-image: url(...)"></span>
  Avatar
</a>
<a href="#" class="btn btn-secondary">
  <span class="avatar" style="background-image: url(...)"></span>
  Avatar
</a>
<a href="#" class="btn btn-secondary">
  <span class="avatar" style="background-image: url(...)"></span>
  Avatar
</a>