Use any of the available button classes to quickly create a styled button.
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xsfor additional sizes.
.btn-lg
.btn-sm
.btn-xs
Large buttonLarge button
Default buttonDefault buttonDefault button
Small buttonSmall buttonSmall button
Extra small buttonExtra small button
Extra small buttonExtra small buttonExtra small button
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
.btn-block
Block level buttonBlock level buttonBlock level button
<buttontype="button"class="btn btn-primary btn-lg btn-block">Block level button</button>
Add the disabledattribute to <button>buttons.
disabled
<button>
Use the button classes on an <a>, <button>, or <input>element.
<a>
<input>
Wrap a series of buttons with .btnin .btn-group.
.btn
.btn-group
Combine sets of <div class="btn-group">into a <div class="btn-toolbar">for more complex components.
<div class="btn-group">
<div class="btn-toolbar">
Place a .btn-groupwithin another .btn-groupwhen you want dropdown menus mixed with a series of buttons.
Turn a button into a dropdown toggle with some basic markup changes.
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
Button dropdowns work with buttons of all sizes.
Instead of applying button sizing classes to every button in a group, just add .btn-group-*to the .btn-group.
.btn-group-*
Just wrap a series of .btns in .btn-group.btn-group-justified.
.btn-group.btn-group-justified
CloudViewUpdateUpload 89
