Documentation

Browse source code
On this page

Buttons

Bootstrap documentation

Use button styles that best suit your designs and encourage users to take the desired actions. You can customise the button's properties to improve the user experience of your website or system, changing the size, shape, colour and many more.

Button tag

As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or system and guiding them in their actions. Use the .btn classes with the <button> element and add additional styling that will make your buttons serve their purpose and draw users’ attention.

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 the button classes that correspond to the function of your button. The big range of available colours will help you show your buttons’ purpose and make them easy to spot.

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 to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.

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

Choose the right colour for your button to make it go well with your design and draw users’ attention. Button colours can have a big influence on users’ decisions, which is why it’s important to choose them based on the intended purpose.

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 the .btn-ghost-* class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users’ attention on the website’s primary design, at the same time encouraging them to take action.

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

Use the .btn-square class to remove border-radius, if you want the corners of your button to be square, not rounded.

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 the .btn-pill class to your button to make it rounded and give it a modern and attractive look.

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

Replace the default modifier class with the .btn-outline-* class, if you want to remove the colour and background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don’t distract users from the main action.

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 to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.

<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>

You can also add the .btn-block class to create block level buttons which span the full width of a parent.

<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>

Buttons with icons

Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognised and improve the aesthetics of your button design, giving it a modern and atractive look.

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

You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the 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 also add an icon without the name of a social networking site, if you want to display more buttons on a small space.

<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

Add the .btn-icon class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognise for international users.

<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>

Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.

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 buttons

Add the .btn-loading class to show a button’s loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won’t give it up before it’s finished.

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

Create a list of buttons using the .btn-list container to display different actions a user can take. If you add aditional styling, such as colours, you will be able to focus users’ attention on a particular action or suggest the result.

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 long, it will be wrapped and some buttons will be moved to the next line, keeping them all 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 change the buttons’ alignment and place them where they suit best.

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>

Buttons with avatars

Use buttons with avatars to simplify the process of interaction and make your design more personalised. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.

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>