Buttons

Search…
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.
Design Guide
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>
Alerts and warnings
Colors and fonts
Last modified 1yr ago
Copy link
Outline
Button group
Justified button group: