+91 90691 39140 | +1 253 214 3115 | info@hub4tech.com | hub4tech

Bootstrap Buttons Video


Button Styles

Bootstrap provides seven styles of buttons. To achieve the button styles above, Bootstrap has the following classes: .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link
Button Styles

The following example shows the code for the different button styles:
< button type="button" class="btn btn-default">Default< /button>
< button type="button" class="btn btn-primary">Primary< /button>
< button type="button" class="btn btn-success">Success< /button>
< button type="button" class="btn btn-info">Info< /button>
< button type="button" class="btn btn-warning">Warning< /button>
< button type="button" class="btn btn-danger">Danger< /button>
< button type="button" class="btn btn-link">Link< /button>
The button classes can be used on an < a>, < button >, or < input > element.

Button Sizes

Bootstrap provides four button sizes:
Button Sizes

The classes that define the different sizes are: .btn-lg, .btn-md, .btn-sm, .btn-xs The following example shows the code for different button sizes:
< button type="button" class="btn btn-primary btn-lg">Large< /button>
< button type="button" class="btn btn-primary btn-md">Medium< /button>
< button type="button" class="btn btn-primary btn-sm">Small< /button>
< button type="button" class="btn btn-primary btn-xs">XSmall< /button>

Block Level Buttons

A block level button spans the entire width of the parent element.
Block Level Buttons

Add class .btn-block to create a block level button:
< button type="button" class="btn btn-primary btn-block" >Button 1< /button>

Active/Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state:
Active/Disabled Buttons

The class .active makes a button appear pressed, and the class .disabled makes a button unclickable:
< button type="button" class="btn btn-primary active">Active Primary< /button>
< button type="button" class="btn btn-primary disabled">Disabled Primary< /button> 


Is it Helpful?
Copyright ©2015 Hub4Tech.com, All Rights Reserved. Hub4Tech™ is registered trademark of Hub4tech Portal Services Pvt. Ltd.
All trademarks and logos appearing on this website are the property of their respective owners.
FOLLOW US