
Use the button classes on an <a>
,
<button>
, or <input>
element.
<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-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button>
In need of a button, but not the hefty
background colors they bring? Replace the default modifier classes with the
.btn-outline-*
ones to remove all
background images and colors on any 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-dark">Dark</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-link">Link</button>
Add .btn-lg
, .btn-sm
for additional sizes.
<button type="button" class="btn btn-sm btn-primary">Small</button> <button type="button" class="btn btn-primary">Normal</button> <button type="button" class="btn btn-lg btn-primary">Large Button</button>
<button type="button" class="btn btn-primary"> <i class="mdi mdi-heart-outline"></i> </button> <button type="button" class="btn btn-success"> <i class="mdi mdi-heart"></i> </button> <button type="button" class="btn btn-warning"> <i class="mdi mdi-map-marker"></i> </button> <button type="button" class="btn btn-danger"> <i class="mdi mdi-close"></i> </button> <button type="button" class="btn btn-info"> <i class="mdi mdi-settings"></i> </button> <button type="button" class="btn btn-primary"> <i class="mdi mdi-share-variant"></i> Share </button> <button type="button" class="btn btn-primary"> <i class="mdi mdi-heart-outline"></i> Like </button>
Use a classes btn btn-circle btn-success
to
quickly create a General btn.
<div class="mb-15"> <button type="button" class="btn btn-primary btn-circle"> <i class="mdi mdi-heart-outline"></i> </button> <button type="button" class="btn btn-success btn-circle"> <i class="mdi mdi-heart"></i> </button> <button type="button" class="btn btn-warning btn-circle"> <i class="mdi mdi-map-marker"></i> </button> <button type="button" class="btn btn-danger btn-circle"> <i class="mdi mdi-close"></i> </button> <button type="button" class="btn btn-info btn-circle"> <i class="mdi mdi-settings"></i> </button> </div> <div class="mb-15"> <button type="button" class="btn btn-outline-primary btn-circle"> <i class="mdi mdi-heart-outline"></i> </button> <button type="button" class="btn btn-outline-success btn-circle"> <i class="mdi mdi-heart"></i> </button> <button type="button" class="btn btn-outline-warning btn-circle"> <i class="mdi mdi-map-marker"></i> </button> <button type="button" class="btn btn-outline-danger btn-circle"> <i class="mdi mdi-close"></i> </button> <button type="button" class="btn btn-outline-info btn-circle"> <i class="mdi mdi-settings"></i> </button> </div> <div class="mb-15"> <button type="button" class="btn btn-outline-primary btn-circle btn-lg"> <i class="mdi mdi-heart-outline"></i> </button> <button type="button" class="btn btn-outline-primary btn-circle"> <i class="mdi mdi-heart-outline"></i> </button> <button type="button" class="btn btn-outline-primary btn-circle btn-sm"> <i class="mdi mdi-heart-outline"></i> </button> </div> <div class="mb-15"> <button type="button" class="btn btn-primary btn-circle btn-lg"> <i class="mdi mdi-heart-outline"></i> </button> <button type="button" class="btn btn-primary btn-circle"> <i class="mdi mdi-heart-outline"></i> </button> <button type="button" class="btn btn-primary btn-circle btn-sm"> <i class="mdi mdi-heart-outline"></i> </button> </div>
Create block level buttons,with by adding add .btn-block
.
<button type="button" class="btn btn-block btn-primary"> Submit </button> <button type="button" class="btn btn-block btn-success"> Submit </button> <button type="button" class="btn btn-block btn-outline-primary"> Submit </button>
<button type="button" class="btn btn-primary"> <i class="spinner-grow spinner-grow-sm"></i> Loading... </button> <button type="button" class="btn btn-primary"> <i class="spinner-border spinner-border-sm"></i> Loading... </button>
<div class="mb-15"> <div class="btn-group"> <button type="button" class="btn btn-light">Left</button> <button type="button" class="btn btn-light">Middle</button> <button type="button" class="btn btn-light">Right</button> </div> </div> <div class="mb-15"> <div class="btn-group mb-2"> <button type="button" class="btn btn-light">1</button> <button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-light">3</button> <div class="btn-group"> <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Goto <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div> </div> <div class="mb-15"> <div class="btn-group"> <button type="button" class="btn btn-primary"> <i class="fas fa-align-left"></i> </button> <button type="button" class="btn btn-primary"> <i class="fas fa-align-center"></i> </button> <button type="button" class="btn btn-primary"> <i class="fas fa-align-right"></i> </button> <button type="button" class="btn btn-primary"> <i class="fas fa-indent"></i> </button> <button type="button" class="btn btn-primary"> <i class="fas fa-outdent"></i> </button> </div> </div>