Bootstrap Buttons

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

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>

Button Sizes

Bootstrap provides four 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: