Buttons
The .btn classes are designed to be used with the <button> element. You can also use these classes on <a> or <input> elements.
css class | description |
---|---|
btn | Specifies that element is used as button. |
btn-primary | Specifies a button filled with a primary color. There are variations: |
btn-outline-primary | Specifies an outline button with a primary color. There are variations: |
btn-lg | Specifies a large button. |
btn-sm | Specifies a small button. |
btn-block | Specifies a block level button. |
close button
btn-close and btn-close-white provide the default style for the close button.
states
You can set active state for non-button element by adding class active and the aria-pressed="true" attribute.
<a href="#"
class="btn btn-primary btn-lg active"
role="button" aria-pressed="true">Primary link</a>
<a href="#"
class="btn btn-secondary btn-lg active"
role="button"
aria-pressed="true">Link</a>
For specify disabled state you can use the disabled attribute of button. For <a> you can use the disabled css class.
<button type="button"
class="btn btn-secondary btn-lg" disabled>Button</button>
<a href="#"
class="btn btn-primary btn-lg disabled"
tabindex="-1" role="button"
aria-disabled="true">Primary link</a>