Bootstrap Buttons

Making Bootstrap Buttons in my previous lesson on Bootstrap i just presented the overview of Bootstrap, in this lesson i am giving full overview on Bootstrap Buttons in Bootstrap Buttons package we have variety of  Stylist Buttons , manage the button sizes , active and inactive status buttons, even we can use html elements as buttons

Default Buttons

Bootstrap Buttons Package we have seven types of Buttons by default in our bootstrap css file we have class name like .btn

• .btn btn-default( it give a default button without any indication visual effect)
• .btn btn-primary
• .btn btn-success
• .btn btn-warning
• .btn btn-info
• .btn btn-danger
• .btn btn-link

<div class="btn btn-default">Default Button</div>
<div class="btn btn-primary">Primary Button</div>
<div class="btn btn-success">Success Button</div>
<div class="btn btn-info">Info Button</div>
<div class="btn btn-warning">Warning Button</div>
<div class="btn btn-danger">Danger Button</div>
<div class="btn btn-link">Link</div>

Manage Button Sizes

We have four button Sizes

• .btn btn-lg
• .btn btn-md
• .btn btn-sm
• .btn btn-xs

<div class="btn btn-primary btn-lg">Primary Button</div>
<div class="btn btn-success btn-md">Success Button</div>
<div class="btn btn-info btn-sm">Info Button</div>
<div class="btn btn-warning btn-xs">Warning Button</div>

Active Disabled Buttons

the Active mode button display pressed mode and Disabled button display unclickable

<div class="btn btn-danger btn-lg active">Active Button</div>
<div class="btn btn-success btn-lg disabled">Disabled Button</div>

Buttons With Icons

Bootstrap Provides 260 Glyphicons i  just used few of icons with buttons

<div class="btn btn-danger btn-lg">
<span class="glyphicon glyphicon-heart"></span> Love
</div>
<div class="btn btn-danger btn-lg active">
<span class="glyphicon glyphicon-trash"></span> Trash
</div>
<div class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-envelope"></span> Message
</div>
<div class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</div>

Live Demo