description: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.
---
## Default markup
### Button tag
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).
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.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
{% include ui/button.html color=button.name text=button.title disabled="true" %}
Add `.btn-square` to button to remove border-radius.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
{% include ui/button.html text=button.title color=button.name square=true %}
{% endfor %}
{% endexample %}
### Pill buttons
Add `.btn-pill` class to any button to make them more rounded.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
{% include ui/button.html text=button.title color=button.name pill=true %}
{% endfor %}
{% endexample %}
### 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.
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
{% include ui/button.html text=button.title color=button.name outline=true %}
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.
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.
{% example html wrapper=btn-list %}
{% include ui/button.html color="primary" text="Button" %}
{% include ui/button.html color="secondary" text="Button" %}
{% include ui/button.html color="danger" text="Button" %}
{% include ui/button.html color="warning" text="Button" %}
{% include ui/button.html color="success" text="Button" %}
