Button Size
btn btn-xs
btn btn-sm
btn
btn btn-lg
Set the size of your buttons using the default Bootstrap classes btn-xs
, btn-sm
and btn-lg
.
<button type="button" class="btn btn-primary btn-xs">Button</button> <button type="button" class="btn btn-primary btn-sm">Button</button> <button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-primary btn-lg">Button</button>
Default Bootstrap Buttons
btn-default
btn-primary
btn-info
btn-success
btn-warning
btn-danger
All the default button classes you expect to find with Bootstrap are included.
<button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-info">Button</button> <button type="button" class="btn btn-success">Button</button> <button type="button" class="btn btn-warning">Button</button> <button type="button" class="btn btn-danger">Button</button> <button type="button" class="btn btn-link">Button</button>
Extra Buttons
btn-green
btn-bronze
btn-red
btn-violet
btn-blue
btn-aqua
As well as all the default Bootstrap button colors we have added a collection of our own which you can integrate in to your next project.
<button type="button" class="btn btn-green">Green</button> <button type="button" class="btn btn-bronze">Bronze</button> <button type="button" class="btn btn-red">Red</button> <button type="button" class="btn btn-violet">Violet</button> <button type="button" class="btn btn-blue">Blue</button> <button type="button" class="btn btn-aqua">Aqua</button>
Button Icons
With the integration of Font Awesome with your template you can add any icon from a collection of over 400 icons to your buttons.
<button class="btn btn-primary" type="button"> <i class="fa fa-picture-o"></i> Icon Button </button> <button class="btn btn-primary" type="button"> <i class="fa fa-database"></i> Icon Button </button> <button class="btn btn-primary" type="button"> <i class="fa fa-bar-chart-o"></i> Icon Button </button> <button class="btn btn-lg btn-primary" type="button"> <i class="fa fa-cogs"></i> </button> <button class="btn btn-primary" type="button"> <i class="fa fa-coffee"></i> </button> <button class="btn btn-sm btn-primary" type="button"> <i class="fa fa-camera"></i> </button>