Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
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).
Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
Make buttons look inactive by adding the disabled boolean attribute to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
The classic button, in different colors.
Add .btn-square to button to remove border-radius.
Add .btn-pill class to any button to make them more rounded.
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.
Add .btn-lg or .btn-sm for additional sizes.
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
You can use only icons.
Icon only button. Add .btn-icon class to remove unnecessary padding from button.
Icon only button (small).
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.
Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside.
Since the loading spinner is implemented using the :after pseudo-element, it is not supported by the <input type="submit"> element.
You can now create a list of buttons with the .btn-list container.
If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
Use the .text-center or the .text-right modifiers to alter the alignment.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Button icons and text icons
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-icon btn-secondary"><i class="far fa-align-center"></i></button>
<button type="button" class="btn btn-icon btn-secondary"><i class="far fa-alarm-clock"></i></button>
<button type="button" class="btn btn-icon btn-secondary"><i class="far fa-bold"></i></button>
</div>
<button type="button" class="btn btn-icon btn-secondary"><i class="far fa-code"></i></button>
<button type="button" class="btn btn-icon btn-secondary"><i class="far fa-image"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-align-center"></i></button>
<button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-alarm-clock"></i></button>
<button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-bold"></i></button>
</div>
<button type="button" class="btn btn-icon btn-secondary"><i class="far fa-code"></i></button>
<button type="button" class="btn btn-icon btn-secondary"><i class="far fa-image"></i></button>
</div>