Buttons

Use the button classes on an <a>, <button>, or <input> element.

Regular
Outline
Round
Block level
Iconic
Icon and Text

Regular

Use any of the available button classes to quickly create a styled button. Fancy larger or smaller buttons? Add .btn-xs, .btn-sm, .btn-lg, or .btn-xl for additional sizes.

Examplehtml

Copy<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>
<button type="button" class="btn btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-xs btn-purple">Purple</button>
<button type="button" class="btn btn-xs btn-teal">Teal</button>
<button type="button" class="btn btn-xs btn-dark">Dark</button>
<button type="button" class="btn btn-xs btn-white">White</button>
<button type="button" class="btn btn-xs btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-purple">Purple</button>
<button type="button" class="btn btn-sm btn-teal">Teal</button>
<button type="button" class="btn btn-sm btn-dark">Dark</button>
<button type="button" class="btn btn-sm btn-white">White</button>
<button type="button" class="btn btn-sm btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-purple">Purple</button>
<button type="button" class="btn btn-teal">Teal</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-white">White</button>
<button type="button" class="btn btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-purple">Purple</button>
<button type="button" class="btn btn-lg btn-teal">Teal</button>
<button type="button" class="btn btn-lg btn-dark">Dark</button>
<button type="button" class="btn btn-lg btn-white">White</button>
<button type="button" class="btn btn-lg btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-xl btn-default">Default</button>
<button type="button" class="btn btn-xl btn-primary">Primary</button>
<button type="button" class="btn btn-xl btn-success">Success</button>
<button type="button" class="btn btn-xl btn-info">Info</button>
<button type="button" class="btn btn-xl btn-warning">Warning</button>
<button type="button" class="btn btn-xl btn-danger">Danger</button>
<button type="button" class="btn btn-xl btn-purple">Purple</button>
<button type="button" class="btn btn-xl btn-teal">Teal</button>
<button type="button" class="btn btn-xl btn-dark">Dark</button>
<button type="button" class="btn btn-xl btn-white">White</button>
<button type="button" class="btn btn-xl btn-link">Link</button>

Outline

Simply add .btn-outline to the button markup.

Examplehtml

Copy<button type="button" class="btn btn-outline btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-xs btn-success">Success</button>
<button type="button" class="btn btn-outline btn-xs btn-info">Info</button>
<button type="button" class="btn btn-outline btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-xs btn-purple">Purple</button>
<button type="button" class="btn btn-outline btn-xs btn-teal">Teal</button>
<button type="button" class="btn btn-outline btn-xs btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-outline btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-sm btn-success">Success</button>
<button type="button" class="btn btn-outline btn-sm btn-info">Info</button>
<button type="button" class="btn btn-outline btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-sm btn-purple">Purple</button>
<button type="button" class="btn btn-outline btn-sm btn-teal">Teal</button>
<button type="button" class="btn btn-outline btn-sm btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-outline btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-success">Success</button>
<button type="button" class="btn btn-outline btn-info">Info</button>
<button type="button" class="btn btn-outline btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-purple">Purple</button>
<button type="button" class="btn btn-outline btn-teal">Teal</button>
<button type="button" class="btn btn-outline btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-outline btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-lg btn-success">Success</button>
<button type="button" class="btn btn-outline btn-lg btn-info">Info</button>
<button type="button" class="btn btn-outline btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-lg btn-purple">Purple</button>
<button type="button" class="btn btn-outline btn-lg btn-teal">Teal</button>
<button type="button" class="btn btn-outline btn-lg btn-dark">Dark</button>

Round

Simply add .btn-round to the button markup.

Examplehtml

Copy<button type="button" class="btn btn-round btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-round btn-xs btn-success">Success</button>
<button type="button" class="btn btn-round btn-xs btn-info">Info</button>
<button type="button" class="btn btn-round btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-round btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-round btn-xs btn-purple">Purple</button>
<button type="button" class="btn btn-round btn-xs btn-teal">Teal</button>
<button type="button" class="btn btn-round btn-xs btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-round btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-round btn-sm btn-success">Success</button>
<button type="button" class="btn btn-round btn-sm btn-info">Info</button>
<button type="button" class="btn btn-round btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-round btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-round btn-sm btn-purple">Purple</button>
<button type="button" class="btn btn-round btn-sm btn-teal">Teal</button>
<button type="button" class="btn btn-round btn-sm btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-round btn-primary">Primary</button>
<button type="button" class="btn btn-round btn-success">Success</button>
<button type="button" class="btn btn-round btn-info">Info</button>
<button type="button" class="btn btn-round btn-warning">Warning</button>
<button type="button" class="btn btn-round btn-danger">Danger</button>
<button type="button" class="btn btn-round btn-purple">Purple</button>
<button type="button" class="btn btn-round btn-teal">Teal</button>
<button type="button" class="btn btn-round btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-round btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-round btn-lg btn-success">Success</button>
<button type="button" class="btn btn-round btn-lg btn-info">Info</button>
<button type="button" class="btn btn-round btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-round btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-round btn-lg btn-purple">Purple</button>
<button type="button" class="btn btn-round btn-lg btn-teal">Teal</button>
<button type="button" class="btn btn-round btn-lg btn-dark">Dark</button>

Block level

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

Examplehtml

Copy<button type="button" class="btn btn-block btn-success">Success</button>
<button type="button" class="btn btn-block btn-info">Info</button>
<button type="button" class="btn btn-block btn-warning">Warning</button>
<br>
<div class="row">
  <div class="col-md-6">
    <button type="button" class="btn btn-block btn-primary">Primary</button>
    <button type="button" class="btn btn-block btn-danger">Danger</button>
  </div>

  <div class="col-md-6">
    <button type="button" class="btn btn-block btn-purple">Purple</button>
    <button type="button" class="btn btn-block btn-teal">Teal</button>
  </div>
</div>

Iconic

Examplehtml

Copy<button type="button" class="btn btn-xs btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-xs btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-xs btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-xs btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-xs btn-dark"><i class="fa fa-git"></i></button>
<button type="button" class="btn btn-xs btn-outline btn-purple"><i class="fa fa-send"></i></button>
<button type="button" class="btn btn-xs btn-outline btn-warning"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-xs btn-outline btn-teal"><i class="fa fa-thumbs-up"></i></button>

<br><br>

<button type="button" class="btn btn-sm btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-sm btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-sm btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-sm btn-dark"><i class="fa fa-git"></i></button>
<button type="button" class="btn btn-sm btn-outline btn-purple"><i class="fa fa-send"></i></button>
<button type="button" class="btn btn-sm btn-outline btn-warning"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-sm btn-outline btn-teal"><i class="fa fa-thumbs-up"></i></button>

<br><br>

<button type="button" class="btn btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-dark"><i class="fa fa-git"></i></button>
<button type="button" class="btn btn-outline btn-purple"><i class="fa fa-send"></i></button>
<button type="button" class="btn btn-outline btn-warning"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-outline btn-teal"><i class="fa fa-thumbs-up"></i></button>

<br><br>

<button type="button" class="btn btn-lg btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-lg btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-lg btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-lg btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-lg btn-dark"><i class="fa fa-git"></i></button>
<button type="button" class="btn btn-lg btn-outline btn-purple"><i class="fa fa-send"></i></button>
<button type="button" class="btn btn-lg btn-outline btn-warning"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-lg btn-outline btn-teal"><i class="fa fa-thumbs-up"></i></button>

Icon and Text

Examplehtml

Copy<button type="button" class="btn btn-xs btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-xs btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-xs btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<button type="button" class="btn btn-xs btn-outline btn-info"><i class="fa fa-info-circle"></i> Information</button>
<button type="button" class="btn btn-xs btn-outline btn-warning"><i class="fa fa-warning"></i> Warning</button>
<button type="button" class="btn btn-xs btn-outline btn-danger"><i class="fa fa-heart"></i> With love</button>

<br><br>

<button type="button" class="btn btn-sm btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-sm btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<button type="button" class="btn btn-sm btn-outline btn-info"><i class="fa fa-info-circle"></i> Information</button>
<button type="button" class="btn btn-sm btn-outline btn-warning"><i class="fa fa-warning"></i> Warning</button>
<button type="button" class="btn btn-sm btn-outline btn-danger"><i class="fa fa-heart"></i> With love</button>

<br><br>

<button type="button" class="btn btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<button type="button" class="btn btn-outline btn-info"><i class="fa fa-info-circle"></i> Information</button>
<button type="button" class="btn btn-outline btn-warning"><i class="fa fa-warning"></i> Warning</button>
<button type="button" class="btn btn-outline btn-danger"><i class="fa fa-heart"></i> With love</button>

<br><br>

<button type="button" class="btn btn-lg btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-lg btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-lg btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<button type="button" class="btn btn-lg btn-outline btn-info"><i class="fa fa-info-circle"></i> Information</button>
<button type="button" class="btn btn-lg btn-outline btn-warning"><i class="fa fa-warning"></i> Warning</button>
<button type="button" class="btn btn-lg btn-outline btn-danger"><i class="fa fa-heart"></i> With love</button>