Bootstrap 5 Buttons
Button Styles
Example
<button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button>You can click on above box to edit the code and run again.
Output
The button classes can be used on <a>
, <button>
, or <input>
elements:
Example
<a href="#" class="btn btn-success">Link Button</a> <button type="button" class="btn btn-success">Button</button> <input type="button" class="btn btn-success" value="Input Button"> <input type="submit" class="btn btn-success" value="Submit Button"> <input type="reset" class="btn btn-success" value="Reset Button">You can click on above box to edit the code and run again.
Output
Button Outline
Example
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button>You can click on above box to edit the code and run again.