Customization Guide
Regular Buttons | Buttons + Icons | Split Buttons | Disabled Buttons | Smaller Buttons | Big Buttons |
---|---|---|---|---|---|
Regular Buttons
<!-- Default --> <a href="#" class="btn btn-default btn-large btn-small btn-mini">Default</a> <!-- Primary --> <a href="#" class="btn btn-primary btn-large btn-small btn-mini">Primary</a> Note: All buttons MUST have the .btn class, followed by optional styling classes; Replace [btn-*] bellow to any of the button classes eg. btn-default, btn-mini, etc. Also, all the btn-* classes can be used on most HTML elements, like <span>, <button>, <input>, <a>, etc. <!-- Disabled Button --> <button class="btn [btn-*]" disabled="disabled">Disabled</button>
Split Buttons
<!-- Split Button --> <div class="btn-group"> <button class="btn [btn-*]">Button</button> <a class="btn [btn-*] dropdown-toggle" data-toggle="dropdown" href="#"> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> ... </ul> </div>
Buttons with Icons
<!-- Left icon --> <a href="#" class="btn btn-primary glyphicons btn-icon home"><i></i>Primary</a> <!-- Right icon --> <!-- Currently, buttons with aligned icons are only available in block mode/full width buttons --> <a href="#" class="btn btn-primary glyphicons btn-icon home btn-block right"><i></i>Primary</a>
Button styles
<!-- Info --> <a href="#" class="btn btn-info">Info</a> <!-- Success --> <a href="#" class="btn btn-success">Success</a> <!-- Warning --> <a href="#" class="btn btn-warning">Warning</a> <!-- Danger --> <a href="#" class="btn btn-danger">Danger</a> <!-- Info --> <a href="#" class="btn btn-info">Danger</a> <!-- Inverse --> <a href="#" class="btn btn-inverse">Inverse</a>
Button sizes
<!-- Mini --> <a href="#" class="btn btn-primary btn-mini">Primary</a> <!-- Small --> <a href="#" class="btn btn-primary btn-small">Primary</a> <!-- Large --> <a href="#" class="btn btn-primary btn-large">Primary</a>