Bootstrap button tag represents a clickable button. For a default button, you need to use a .btn class, it has gray color with rounded corners and 1-pixel border. Bootstrap provide some more style button you can use that classes with .btn class.

Below is a list with explanation of that seven classes-

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

<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>

This classes can be used with ancor tag (<a href=""></a>) and also input feild -

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="submit" class="btn btn-info" value="Submit">
<input type="button" class="btn btn-info" value="Input">

Button Sizes

You can change the button size with below classes -

• .btn-lg (For large button)
• .btn-md (For medium button)
• .btn-sm (for small button)
• .btn-xs (And this for extra small button)

Syntax for button classes -

<button type="button" class="btn btn-* btn-*">Large</button>

Block Level Buttons

The .btn-block change a botton as block elements -

<button type="button" class="btn btn-primary btn-block">Block Button</button>

Button State

To make disabled and enable (active) buttons you can use .disabled (unclickable) and .active class

<button type="button" class="btn btn-primary disabled">Disabled </button>
<button type="button" class="btn btn-primary active">Active </button>