Buttons
Colored, outlined and differently sized buttons are listed below.
Live demo
Solid colors
Extra colors
Soft colors
Outlines
White and link
Sizes
Shapes and extras
Code
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success btn-lg">Large success</button>
<button class="btn btn-outline-danger">Outline danger</button>
<button class="btn btn-warning-soft">Soft warning</button>
<button class="btn btn-purple">Purple</button>
<button class="btn btn-outline-teal">Teal outline</button>
<button class="btn btn-info btn-pill">Info pill</button>
<button class="btn btn-dark btn-xs" disabled>Extra small</button>Tip: .btn-warning and .btn-info use a dark text color so the light background stays readable. All solid buttons, including the extra colors (.btn-purple, .btn-indigo, .btn-teal, .btn-orange, .btn-rose, .btn-fuchsia), keep at least a 4.5:1 contrast ratio.