Demonstration of Bootstrap

This page demonstrate the Bootstrap Buttons, Buttons Group and Glyphicon.

Button Styles

Bootstrap provides seven styles of buttons:



To achieve the button styles above, we are using the following classes: .btn-default .btn-primary .btn-success etc.


Button Tags

The button classes can be used on an <a> <button>, or <input> element:

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


Button Group

We can group a series of buttons together (on a single line) in a button group, using a <div> element with class .btn-group :


Nesting Button Groups

Nest button groups to create drop down menus:



Glyphicon Examples

Search icon:

Search icon on a button:

Search icon on a styled button:

Print icon on a styled link button: Print

Thumbs-up and Thumbs-down icon on a button: