Buttons
Common Buttons
Use the button classes on an <a>, <button>, or <input> element.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-text-primary"><i class="uil-angle-left"></i>Text Button</button>
Default Buttons
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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Button Outline
Use a classes .btn-outline-** to quickly create a bordered buttons.
<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"><i class="uil-cloud-computing"></i> 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"><i class="uil-circuit"></i> Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Button-Rounded
Add .rounded-pill to default button to get rounded corners.
<button type="button" class="btn btn-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-success rounded-pill">Success</button>
<button type="button" class="btn btn-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-info rounded-pill">Info</button>
<button type="button" class="btn btn-light rounded-pill">Light</button>
<button type="button" class="btn btn-dark rounded-pill">Dark</button>
<button type="button" class="btn btn-link rounded-pill">Link</button>
Button Outline Rounded
Use a classes .btn-outline-** to quickly create a bordered buttons.
<button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
<button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
<button type="button" class="btn btn-outline-success rounded-pill"><i class="uil-cloud-computing"></i> Success</button>
<button type="button" class="btn btn-outline-danger rounded-pill">Danger</button>
<button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>
<button type="button" class="btn btn-outline-info rounded-pill"><i class="uil-circuit"></i> Info</button>
<button type="button" class="btn btn-outline-light rounded-pill">Light</button>
<button type="button" class="btn btn-outline-dark rounded-pill">Dark</button>
Button-Sizes
Add .btn-lg, .btn-sm for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-info">Normal</button>
<button type="button" class="btn btn-success btn-sm">Small</button>
Button-Disabled
Add the disabled attribute to <button> buttons.
<button type="button" class="btn btn-info" disabled>Info</button>
<button type="button" class="btn btn-success" disabled>Success</button>
<button type="button" class="btn btn-danger" disabled>Danger</button>
<button type="button" class="btn btn-dark" disabled>Dark</button>
Icon Buttons
Icon only button.
<button type="button" class="btn btn-light"><i class="mdi mdi-heart-outline"></i> </button>
<button type="button" class="btn btn-danger"><i class="mdi mdi-window-close"></i> </button>
<button type="button" class="btn btn-dark"><i class="mdi mdi-music"></i> </button>
<button type="button" class="btn btn-primary"><i class="mdi mdi-star"></i> </button>
<button type="button" class="btn btn-success"><i class="mdi mdi-thumb-up-outline"></i> </button>
<button type="button" class="btn btn-info"><i class="mdi mdi-keyboard"></i> </button>
<button type="button" class="btn btn-warning"><i class="mdi mdi-wrench"></i> </button>
<button type="button" class="btn btn-light"><i class="mdi mdi-heart me-1"></i> <span>Like</span> </button>
<button type="button" class="btn btn-warning"><i class="mdi mdi-rocket me-1"></i> <span>Launch</span> </button>
<button type="button" class="btn btn-info"><i class="mdi mdi-cloud me-1"></i> <span>Cloud Hosting</span> </button>
<button type="button" class="btn btn-outline-success"><i class="uil-money-withdrawal"></i> Money</button>
<button type="button" class="btn btn-outline-primary"><i class="uil-paypal"></i> PayPal</button>
<button type="button" class="btn btn-outline-danger"><i class="uil-cog"></i> Settings</button>
Block Button
Create block level buttons by adding class .d-grid to parent div.
<div class="d-grid">
<button type="button" class="btn btn-primary">Block Button</button>
<button type="button" class="btn btn-sm btn-info">Block Button</button>
<button type="button" class="btn btn-xs btn-success">Block Button</button>
</div>
<!-- end d-grid -->
Button Group
Wrap a series of buttons with .btn in .btn-group.
<!-- Button Group -->
<div class="btn-group mb-2">
<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>
<!-- Button Group with Dropdowns-->
<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-bs-toggle="dropdown" aria-expanded="false"> Dropdown <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>
<!-- Button Group Vertical-->
<div class="btn-group-vertical mb-2">
<button type="button" class="btn btn-light">Top</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Bottom</button>
</div>
<!-- Button Group Vertical with Dropdowns-->
<div class="btn-group-vertical mb-2">
<button type="button" class="btn btn-light">Button 1</button>
<button type="button" class="btn btn-light">Button 2</button>
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 3 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>