Buttons
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 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>
Soft Buttons
Use a classes .btn-soft-** to quickly create a soft background color buttons.
<button type="button" class="btn btn-soft-primary">Primary</button>
<button type="button" class="btn btn-soft-secondary">Secondary</button>
<button type="button" class="btn btn-soft-success">Success</button>
<button type="button" class="btn btn-soft-danger">Danger</button>
<button type="button" class="btn btn-soft-warning">Warning</button>
<button type="button" class="btn btn-soft-info">Info</button>
<button type="button" class="btn btn-soft-dark">Dark</button>
Soft Rounded Buttons
Use a classes .btn-soft-** .rounded-pill to quickly create a soft background color buttons with rounded.
<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-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-sm btn-primary">Block Button</button>
<button type="button" class="btn btn-lg 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>
Toggle Button
Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Button tags
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Basic Button
Bootstrap has a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles.
<button type="button" class="btn">Base class</button><button type="button" class="btn">Base class</button>
Focus Ring Custom
Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Custom focus ring
</a>
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--ct-focus-ring-color: rgba(var(--ct-success-rgb), .25)">
Green focus ring
</a>
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--ct-focus-ring-x: 10px; --ct-focus-ring-y: 10px; --ct-focus-ring-blur: 4px">
Blurry offset focus ring
</a>
Focus Ring Utilities
In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.
<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
<p class="mb-0"><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>