Buttons

Options

For using different types of buttons, use any of the available classes btn btn-default
Example


<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

<!-- Transparent primary button -->
<button type="button" class="btn btn-primary transparent">Primary Transparent</button>

<!-- Transparent success button -->
<button type="button" class="btn btn-success transparent">Success Transparent</button>

<!-- Transparent info button -->
<button type="button" class="btn btn-info transparent">Info Transparent</button>

<!-- Transparent warning button -->
<button type="button" class="btn btn-warning transparent">Warning Transparent</button>

<!-- Transparent danger button -->
<button type="button" class="btn btn-danger transparent">Danger Transparent</button>

Sizes

Changing the size of buttons, add classes btn-lg, btn-sm, btn-xs
Example
<button type="button" class="btn btn-primary btn-lg">Large Button</button>

<button type="button" class="btn btn-primary">Default Button</button>

<button type="button" class="btn btn-primary btn-sm">Small Button</button>

<button type="button" class="btn btn-primary btn-xs">Extra Small Button</button>

Disabled Buttons

Make buttons unclickable by fading them
Add the disabled attribute to the <button>
Example
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Buttons with icon

Example
<button type="button" class="btn btn-primary"><i class="fa fa-bell pull-left"></i>Button</button>
<button type="button" class="btn btn-default"><i class="fa fa-bell pull-right"></i>Button</button>

Button Groups

Wrap a series of buttons with .btn in .btn-group

Options

Example
<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Sizing

Example
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
For further reading please refer to bootstrap documentation