Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

								
<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
								
							
								
<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-seegreen">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
								
							
								
<button type="button" class="btn btn-light-primary">Primary</button>
<button type="button" class="btn btn-light-success">Success</button>
<button type="button" class="btn btn-light-danger">Danger</button>
<button type="button" class="btn btn-light-warning">Warning</button>
<button type="button" class="btn btn-light-info">Info</button>
<button type="button" class="btn btn-light-purple">Light</button>
<button type="button" class="btn btn-light-seegreen">Dark</button>
								
							
								
<button type="button" class="btn rounded-pill btn-light-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-light-success">Success</button>
<button type="button" class="btn rounded-pill btn-light-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-light-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-light-info">Info</button>
<button type="button" class="btn rounded-pill btn-light-purple">Light</button>
<button type="button" class="btn rounded-pill btn-light-seegreen">Dark</button>
								
							
								
<button type="button" class="btn btn-rounded btn-xxl p-0 btn-light-primary">A</button>
<button type="button" class="btn btn-rounded btn-xl p-0 btn-light-success">B</button>
<button type="button" class="btn btn-rounded btn-lg p-0 btn-light-danger">C</button>
<button type="button" class="btn btn-rounded btn-md p-0 btn-light-warning">D</button>
<button type="button" class="btn btn-rounded btn-xxl p-0 btn-info">E</button>
<button type="button" class="btn btn-rounded btn-xl p-0 btn-purple">F</button>
<button type="button" class="btn btn-rounded btn-lg p-0 btn-seegreen">G</button>
								
							
								
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Already working together?

log in to your account and connect with your teammates!.