Buttons
Overview of button usage.
Available button styles:
Buttons.
Please note:
  • We do not use the btn-info and btn-warning unless it really make sense in a specific case.
  • btn-primary should only be used once in every view, if possible.
  • All the btn classes can be used on both a and button elements.
Examples:
Primary button.
<button class="btn btn-primary">Buy</button>
<button class="btn btn-default">Cancel</button>
Danger button.
<button class="btn btn-danger">Delete</button>
<button class="btn btn-default">Cancel</button>
Success button.
<button class="btn btn-success">Complete</button>
<button class="btn btn-default">Back</button>

Button group

Four buttons grouped.
<div class="btn-group">
<button class="btn btn-default"><i class="fas fa-arrow-left"></i></button>
<button class="btn btn-default"><i class="fas fa-play-circle"></i></button>
<button class="btn btn-default"><i class="fas fa-pause-circle"></i></button>
<button class="btn btn-default"><i class="fas fa-arrow-right"></i></button>
</div>

Justified button group:

Four buttons grouped.
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default"><i class="fas fa-arrow-left"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><i class="fas fa-play-circle"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><i class="fas fa-pause-circle"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
Same effect with a elements:
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default"><i class="fas fa-arrow-left"></i></a>
...
</div>