Buttons

Other topics

Button types

<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>

enter image description here

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

Button size

The class for size button bootstrap is :

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

enter image description here

For example :

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Parameters:

ClassDescription
btn-defaultStandard button. @brand-default: #fff
btn-primaryProvides extra visual weight and identifies the primary action. @brand-primary: darken(#428bca, 6.5%);
btn-successUsed to indicate a successful action. @brand-success: #5cb85c;
btn-infoContextual button for providing information. @brand-info: #5bc0de;
btn-warningIndicates caution should be applied by the user. @brand-warning: #f0ad4e;
btn-dangerIndicates a dangerous or negative action. @brand-danger: #d9534f;
btn-linkUse for link.

Contributors

Topic Id: 5517

Example Ids: 19620,19884

This site is not affiliated with any of the contributors.