Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Button default

<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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Overlay buttons

<button type="button" class="btn btn-overlay-primary">Primary</button>
<button type="button" class="btn btn-overlay-secondary">Secondary</button>
<button type="button" class="btn btn-overlay-success">Success</button>
<button type="button" class="btn btn-overlay-danger">Danger</button>
<button type="button" class="btn btn-overlay-warning">Warning</button>
<button type="button" class="btn btn-overlay-info">Info</button>
<button type="button" class="btn btn-overlay-light">Light</button>
<button type="button" class="btn btn-overlay-dark">Dark</button>

Outline buttons

<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-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Light outline buttons

<button type="button" class="btn btn-outline-primary outline-gray">Primary</button>
<button type="button" class="btn btn-outline-secondary outline-gray">Secondary</button>
<button type="button" class="btn btn-outline-success outline-gray">Success</button>
<button type="button" class="btn btn-outline-danger outline-gray">Danger</button>
<button type="button" class="btn btn-outline-warning outline-gray">Warning</button>
<button type="button" class="btn btn-outline-info outline-gray">Info</button>
<button type="button" class="btn btn-outline-light outline-gray">Light</button>
<button type="button" class="btn btn-outline-dark outline-gray">Dark</button>

Outline buttons 2px

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

buttons large

<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-light">Light</button>
<button type="button" class="btn btn-lg btn-dark">Dark</button>

Outline small

<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-secondary">Secondary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-light">Light</button>
<button type="button" class="btn btn-sm btn-dark">Dark</button>

Active state

Primary Secondary Success Danger Warning Info Light Dark 
<a href="#" class="btn btn-primary active" role="button" aria-pressed="ture"> Primary</a>
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="ture"> Secondary</a>
<a href="#" class="btn btn-success active" role="button" aria-pressed="ture"> Success</a>
<a href="#" class="btn btn-danger active" role="button" aria-pressed="ture"> Danger</a>
<a href="#" class="btn btn-warning active" role="button" aria-pressed="ture"> Warning</a>
<a href="#" class="btn btn-info active" role="button" aria-pressed="ture"> Info</a>
<a href="#" class="btn btn-light active" role="button" aria-pressed="ture"> Light</a>
<a href="#" class="btn btn-dark active" role="button" aria-pressed="ture"> Dark</a>

Disabled state

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

Checkbox

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-success active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-danger active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-danger active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-warning active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-info active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-light active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-dark active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

Radio buttons

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
	<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-success active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-success">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-success">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-danger active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-warning active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-warning">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-warning">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-info active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-light active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-light">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-light">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-dark active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-dark">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-dark">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Buttons block

<button type="button" class="btn btn-outline-primary btn-block">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-block">Secondary</button>
<button type="button" class="btn btn-outline-success btn-block">Success</button>
<button type="button" class="btn btn-outline-danger btn-block">Danger</button>
<button type="button" class="btn btn-outline-warning btn-block">Warning</button>
<button type="button" class="btn btn-outline-info btn-block">Info</button>
<button type="button" class="btn btn-outline-light btn-block">Light</button>
<button type="button" class="btn btn-outline-dark btn-block">Dark</button>

Button iocn

<button type="button" class="btn btn-primary"> <i class="fa fa-hand-pointer-o"></i> Primary</button>
<button type="button" class="btn btn-secondary"> <i class="fa fa-heart-o"></i> Secondary</button>
<button type="button" class="btn btn-success"> <i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-danger"><i class="fa fa-warning"></i> Danger</button>
<button type="button" class="btn btn-warning"> <i class="fa fa-refresh"></i> Warning</button>
<button type="button" class="btn btn-info"> <i class="fa fa-info-circle"></i> Info</button>
<button type="button" class="btn btn-light"> <i class="fa fa-gear"></i> Light</button>
<button type="button" class="btn btn-dark"> <i class="fa fa-share-alt"></i> Dark</button>

Overlay buttons icon 

<button type="button" class="btn btn-overlay-primary"> <i class="fa fa-hand-pointer-o"></i> Primary</button>
<button type="button" class="btn btn-overlay-secondary"> <i class="fa fa-heart-o"></i> Secondary</button>
<button type="button" class="btn btn-overlay-success"> <i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-overlay-danger"><i class="fa fa-warning"></i> Danger</button>
<button type="button" class="btn btn-overlay-warning"> <i class="fa fa-refresh"></i> Warning</button>
<button type="button" class="btn btn-overlay-info"> <i class="fa fa-info-circle"></i> Info</button>
<button type="button" class="btn btn-overlay-light"> <i class="fa fa-gear"></i> Light</button>
<button type="button" class="btn btn-overlay-dark"> <i class="fa fa-share-alt"></i> Dark</button>

Outline buttons icon

<button type="button" class="btn btn-outline-primary"> <i class="fa fa-hand-pointer-o"></i> Primary</button>
<button type="button" class="btn btn-outline-secondary"> <i class="fa fa-heart-o"></i> Secondary</button>
<button type="button" class="btn btn-outline-success"> <i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-outline-danger"><i class="fa fa-warning"></i> Danger</button>
<button type="button" class="btn btn-outline-warning"> <i class="fa fa-refresh"></i> Warning</button>
<button type="button" class="btn btn-outline-info"> <i class="fa fa-info-circle"></i> Info</button>
<button type="button" class="btn btn-outline-light"> <i class="fa fa-gear"></i> Light</button>
<button type="button" class="btn btn-outline-dark"> <i class="fa fa-share-alt"></i> Dark</button>

Light outline buttons icon

<button type="button" class="btn btn-outline-primary outline-gray"> <i class="fa fa-hand-pointer-o"></i> Primary</button>
<button type="button" class="btn btn-outline-secondary outline-gray"> <i class="fa fa-heart-o"></i> Secondary</button>
<button type="button" class="btn btn-outline-success outline-gray"> <i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-outline-danger outline-gray"><i class="fa fa-warning"></i> Danger</button>
<button type="button" class="btn btn-outline-warning outline-gray"> <i class="fa fa-refresh"></i> Warning</button>
<button type="button" class="btn btn-outline-info outline-gray"> <i class="fa fa-info-circle"></i> Info</button>
<button type="button" class="btn btn-outline-light outline-gray"> <i class="fa fa-gear"></i> Light</button>
<button type="button" class="btn btn-outline-dark outline-gray"> <i class="fa fa-share-alt"></i> Dark</button>

Outline buttons icon 2px

<button type="button" class="btn btn-outline-primary outline-2px"> <i class="fa fa-hand-pointer-o"></i> Primary</button>
<button type="button" class="btn btn-outline-secondary outline-2px"> <i class="fa fa-heart-o"></i> Secondary</button>
<button type="button" class="btn btn-outline-success outline-2px"> <i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-outline-danger outline-2px"><i class="fa fa-warning"></i> Danger</button>
<button type="button" class="btn btn-outline-warning outline-2px"> <i class="fa fa-refresh"></i> Warning</button>
<button type="button" class="btn btn-outline-info outline-2px"> <i class="fa fa-info-circle"></i> Info</button>
<button type="button" class="btn btn-outline-light outline-2px"> <i class="fa fa-gear"></i> Light</button>
<button type="button" class="btn btn-outline-dark outline-2px"> <i class="fa fa-share-alt"></i> Dark</button>

Buttons icon

<button type="button" class="btn btn-primary btn-icon"> <i class="fa fa-hand-pointer-o"></i> </button>
<button type="button" class="btn btn-secondary btn-icon"> <i class="fa fa-heart-o"></i> </button>
<button type="button" class="btn btn-success btn-icon"> <i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-danger btn-icon"><i class="fa fa-warning"></i> </button>
<button type="button" class="btn btn-warning btn-icon"> <i class="fa fa-refresh"></i> </button>
<button type="button" class="btn btn-info btn-icon"> <i class="fa fa-info-circle"></i> </button>
<button type="button" class="btn btn-light btn-icon"> <i class="fa fa-gear"></i> </button>
<button type="button" class="btn btn-dark btn-icon"> <i class="fa fa-share-alt"></i> </button>

Outline buttons icon overlay

<button type="button" class="btn btn-overlay-primary btn-icon"> <i class="fa fa-hand-pointer-o"></i> </button>
<button type="button" class="btn btn-overlay-secondary btn-icon"> <i class="fa fa-heart-o"></i> </button>
<button type="button" class="btn btn-overlay-success btn-icon"> <i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-overlay-danger btn-icon"><i class="fa fa-warning"></i> </button>
<button type="button" class="btn btn-overlay-warning btn-icon"> <i class="fa fa-refresh"></i> </button>
<button type="button" class="btn btn-overlay-info btn-icon"> <i class="fa fa-info-circle"></i> </button>
<button type="button" class="btn btn-overlay-light btn-icon"> <i class="fa fa-gear"></i> </button>
<button type="button" class="btn btn-overlay-dark btn-icon"> <i class="fa fa-share-alt"></i> </button>

Outline gray buttons icon 

<button type="button" class="btn btn-outline-primary btn-icon outline-gray"> <i class="fa fa-hand-pointer-o"></i> </button>
<button type="button" class="btn btn-outline-secondary btn-icon outline-gray"> <i class="fa fa-heart-o"></i> </button>
<button type="button" class="btn btn-outline-success btn-icon outline-gray"> <i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-outline-danger btn-icon outline-gray"><i class="fa fa-warning"></i> </button>
<button type="button" class="btn btn-outline-warning btn-icon outline-gray"> <i class="fa fa-refresh"></i> </button>
<button type="button" class="btn btn-outline-info btn-icon outline-gray"> <i class="fa fa-info-circle"></i> </button>
<button type="button" class="btn btn-outline-light btn-icon outline-gray"> <i class="fa fa-gear"></i> </button>
<button type="button" class="btn btn-outline-dark btn-icon outline-gray"> <i class="fa fa-share-alt"></i> </button>

Outline buttons icon 1px

<button type="button" class="btn btn-outline-primary btn-icon"> <i class="fa fa-hand-pointer-o"></i> </button>
<button type="button" class="btn btn-outline-secondary btn-icon"> <i class="fa fa-heart-o"></i> </button>
<button type="button" class="btn btn-outline-success btn-icon"> <i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-outline-danger btn-icon"><i class="fa fa-warning"></i> </button>
<button type="button" class="btn btn-outline-warning btn-icon"> <i class="fa fa-refresh"></i> </button>
<button type="button" class="btn btn-outline-info btn-icon"> <i class="fa fa-info-circle"></i> </button>
<button type="button" class="btn btn-outline-light btn-icon"> <i class="fa fa-gear"></i> </button>
<button type="button" class="btn btn-outline-dark btn-icon"> <i class="fa fa-share-alt"></i> </button>

Outline buttons icon 2px

<button type="button" class="btn btn-outline-primary btn-icon outline-2px"> <i class="fa fa-hand-pointer-o"></i> </button>
<button type="button" class="btn btn-outline-secondary btn-icon outline-2px"> <i class="fa fa-heart-o"></i> </button>
<button type="button" class="btn btn-outline-success btn-icon outline-2px"> <i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-outline-danger btn-icon outline-2px"><i class="fa fa-warning"></i> </button>
<button type="button" class="btn btn-outline-warning btn-icon outline-2px"> <i class="fa fa-refresh"></i> </button>
<button type="button" class="btn btn-outline-info btn-icon outline-2px"> <i class="fa fa-info-circle"></i> </button>
<button type="button" class="btn btn-outline-light btn-icon outline-2px"> <i class="fa fa-gear"></i> </button>
<button type="button" class="btn btn-outline-dark btn-icon outline-2px"> <i class="fa fa-share-alt"></i> </button>

Social icon

<a href="#" class="btn btn-facebook btn-icon"> <i class="fa fa-facebook"></i> </a>
<a href="#" class="btn btn-twitter btn-icon"> <i class="fa fa-twitter"></i> </a>
<a href="#" class="btn btn-google-plus btn-icon"> <i class="fa fa-google-plus"></i> </a>
<a href="#" class="btn btn-linkedin btn-icon"><i class="fa fa-linkedin"></i> </a>
<a href="#" class="btn btn-instagram btn-icon"> <i class="fa fa-instagram"></i> </a>
<a href="#" class="btn btn-pinterest btn-icon"> <i class="fa fa-pinterest"></i> </a>
<a href="#" class="btn btn-dribbble btn-icon"> <i class="fa fa-dribbble"></i> </a>
<a href="#" class="btn btn-youtube btn-icon"> <i class="fa fa-youtube"></i> </a>
<a href="#" class="btn btn-dropbox btn-icon"> <i class="fa fa-dropbox"></i> </a>
<a href="#" class="btn btn-github btn-icon"> <i class="fa fa-github"></i> </a>
<a href="#" class="btn btn-skype btn-icon"> <i class="fa fa-skype"></i> </a>
<a href="#" class="btn btn-tumblr btn-icon"> <i class="fa fa-tumblr"></i> </a>
<a href="#" class="btn btn-flickr btn-icon"> <i class="fa fa-flickr"></i> </a>

buttons icon large

<button type="button" class="btn btn-primary btn-icon btn-lg"> <i class="fa fa-hand-pointer-o"></i> </button>
<button type="button" class="btn btn-secondary btn-icon btn-lg"> <i class="fa fa-heart-o"></i> </button>
<button type="button" class="btn btn-success btn-icon btn-lg"> <i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-danger btn-icon btn-lg"><i class="fa fa-warning"></i> </button>
<button type="button" class="btn btn-warning btn-icon btn-lg"> <i class="fa fa-refresh"></i> </button>
<button type="button" class="btn btn-info btn-icon btn-lg"> <i class="fa fa-info-circle"></i> </button>
<button type="button" class="btn btn-light btn-icon btn-lg"> <i class="fa fa-gear"></i> </button>
<button type="button" class="btn btn-dark btn-icon btn-lg"> <i class="fa fa-share-alt"></i> </button>

Buttons icon small

<button type="button" class="btn btn-primary btn-icon btn-sm"> <i class="fa fa-hand-pointer-o"></i> </button>
<button type="button" class="btn btn-secondary btn-icon btn-sm"> <i class="fa fa-heart-o"></i> </button>
<button type="button" class="btn btn-success btn-icon btn-sm"> <i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-danger btn-icon btn-sm"><i class="fa fa-warning"></i> </button>
<button type="button" class="btn btn-warning btn-icon btn-sm"> <i class="fa fa-refresh"></i> </button>
<button type="button" class="btn btn-info btn-icon btn-sm"> <i class="fa fa-info-circle"></i> </button>
<button type="button" class="btn btn-light btn-icon btn-sm"> <i class="fa fa-gear"></i> </button>
<button type="button" class="btn btn-dark btn-icon btn-sm"> <i class="fa fa-share-alt"></i> </button>

Outline buttons block icon

<button type="button" class="btn btn-outline-primary btn-block"> <i class="fa fa-hand-pointer-o"></i> Primary</button>
<button type="button" class="btn btn-outline-secondary btn-block"> <i class="fa fa-heart-o"></i> Secondary</button>
<button type="button" class="btn btn-outline-success btn-block"> <i class="fa fa-check"></i> Success</button>
<button type="button" class="btn btn-outline-danger btn-block"><i class="fa fa-warning"></i> Danger</button>
<button type="button" class="btn btn-outline-warning btn-block"> <i class="fa fa-refresh"></i> Warning</button>
<button type="button" class="btn btn-outline-info btn-block"> <i class="fa fa-info-circle"></i> Info</button>
<button type="button" class="btn btn-outline-light btn-block"> <i class="fa fa-gear"></i> Light</button>
<button type="button" class="btn btn-outline-dark btn-block"> <i class="fa fa-share-alt"></i> Dark</button>