<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-link">Link</button>
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).
When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<input class="btn btn-default" type="reset" value="Reset">
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-default btn-outline">Default</button>
<button type="button" class="btn btn-primary btn-outline">Primary</button>
<button type="button" class="btn btn-success btn-outline">Success</button>
<button type="button" class="btn btn-info btn-outline">Info</button>
<button type="button" class="btn btn-warning btn-outline">Warning</button>
<button type="button" class="btn btn-danger btn-outline">Danger</button>Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
<button type="button" class="btn btn-default btn-lg">Large</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-default btn-sm">Small</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-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-block">Block level button</button>