Overview
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Example
Code Example
<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 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).
Code Example
<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">
Outline buttons
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.
Code 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-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-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>
Dim buttons
Use the .btn-dim class with .btn class
Code Example
<button type="button" class="btn btn-dim btn-primary">Primary</button> <button type="button" class="btn btn-dim btn-secondary">Secondary</button> <button type="button" class="btn btn-dim btn-success">Success</button> <button type="button" class="btn btn-dim btn-danger">Danger</button> <button type="button" class="btn btn-dim btn-warning">Warning</button> <button type="button" class="btn btn-dim btn-info">Info</button> <button type="button" class="btn btn-dim btn-light">Light</button> <button type="button" class="btn btn-dim btn-dark">Dark</button>
Pill buttons
Use the .btn-round class for rounded button with .btn class
Code Example
<button type="button" class="btn btn-round btn-primary">Primary</button> <button type="button" class="btn btn-round btn-secondary">Secondary</button> <button type="button" class="btn btn-round btn-success">Success</button> <button type="button" class="btn btn-round btn-danger">Danger</button> <button type="button" class="btn btn-round btn-warning">Warning</button> <button type="button" class="btn btn-round btn-info">Info</button> <button type="button" class="btn btn-round btn-light">Light</button> <button type="button" class="btn btn-round btn-dark">Dark</button>
Sizes
Fancy larger or smaller buttons? Add .btn-xl .btn-lg or .btn-sm for additional sizes.
Code Example
<button type="button" class="btn btn-xl btn-primary">Extra Large</button> <button type="button" class="btn btn-lg btn-primary">Large</button> <button type="button" class="btn btn-primary">Default</button> <button type="button" class="btn btn-sm btn-primary">Small</button>
Toggle states
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.
Code Example
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button> <button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button> <button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>