Solid Button
You are free to use several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Outline Buttons
In need of a outline button Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any 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).
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).
Checkbox
The checked state for these buttons is only updated via click
event on the button. If you use another method to update the input—e.g., with <input type="reset">
or by manually applying the input’s checked
property—you’ll need to toggle .active
on the <label>
manually.
radio buttons
The checked state for these buttons is only updated via click
event on the button. If you use another method to update the input—e.g., with <input type="reset">
or by manually applying the input’s checked
property—you’ll need to toggle .active
on the <label>
manually.
Outline buttons
In need of a outline button Replace the default modifier classes with the .btn-outline-*
ones to remove all background images and colors on any button.
Outline buttons
In need of a outline button Replace the default modifier classes with the .btn-outline-*
ones to remove all background images and colors on any button.
light button
Use .btn-transparent
class to have a custom button style with a lighter background color and dark font color.