Bootstrap Buttons

• button classes

<!-- Standard button --> <button type="button" class="btn btn-default">Default Button</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary Button</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success Button</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info Button</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning Button</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger Button</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link Button</button>

• Button Size

<p> <button type="button" class="btn btn-primary btn-lg"> Large Primary button </button> <button type="button" class="btn btn-default btn-lg" >Large button </button> </p> <p> <button type="button" class="btn btn-primary"> Default size Primary button </button> <button type="button" class="btn btn-default"> Default size button </button> </p> <p> <button type="button" class="btn btn-primary btn-sm"> Small Primary button </button> <button type="button" class="btn btn-default btn-sm"> Small button </button> </p> <p> <button type="button" class="btn btn-primary btn-xs"> Extra small Primary button </button> <button type="button" class="btn btn-default btn-xs"> Extra small button </button> </p> <p> <button type="button" class="btn btn-primary btn-lg btn-block"> Block level Primary button </button> <button type="button" class="btn btn-default btn-lg btn-block"> Block level button </button> </p>

• Button State-ACTIVE STATE

<p> <button type="button" class="btn btn-default btn-lg "> Default Button </button> <button type="button" class="btn btn-default btn-lg active"> Active Button </button> </p> <p> <button type="button" class="btn btn-primary btn-lg "> Primary button </button> <button type="button" class="btn btn-primary btn-lg active"> Active Primary button </button> </p>

• Button State--DISABLED STATE

<p> <button type="button" class="btn btn-default btn-lg"> Default Button </button> <button type="button" class="btn btn-default btn-lg" disabled="disabled"> Disabled Button </button> </p> <p> <button type="button" class="btn btn-primary btn-lg "> Primary button </button> <button type="button" class="btn btn-primary btn-lg" disabled="disabled"> Disabled Primary button </button> </p> <p> <a href="#" class="btn btn-default btn-lg" role="button"> Link </a> <a href="#" class="btn btn-default btn-lg disabled" role="button"> Disabled Link </a> </p> <p> <a href="#" class="btn btn-primary btn-lg" role="button"> Primary link </a> <a href="#" class="btn btn-primary btn-lg disabled" role="button"> Disabled Primary link </a> </p>

• Button Tags

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

• Bootstrap Images

<img src="img/faceless.jpg" class="img-rounded"> <img src="img/faceless.jpg" class="img-circle"> <img src="img/faceless.jpg" class="img-thumbnail">