Buttons
Examples
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
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.
Rounded Buttons
Add .btn-rounded class in <button> tag for a rounded button.
Default button
Outline Rounded 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).
Sizes
Fancy larger or smaller buttons? Add
.btn-lg or .btn-sm for additional sizes.
Large button
Small button
Block Buttons
Create block level buttons—those that
span the full width of a parent—by adding .btn-block.
Toggle states
Add data-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 the
<button>.
Button addons
Button Group
Group a series of buttons together on a single line with the button group
Basic example
Button toolbar
Vertical variation
Checkbox-Radio buttons
Bootstrap’s .button styles can be applied to
other elements, such as
<label>s, to provide checkbox or radio style button
toggling. Add data-toggle="buttons" to a
.btn-group containing those
modified buttons to enable toggling in their respective styles.
