Bootstrap Buttons

Bootstrap provides seven different types of button which can be applied in <a>, <input> and <button> elements.

Button Styles

<div class="container">
     <a href="#" class="btn btn-default">Default Button</a>
     <a href="#" class="btn btn-primary">Primary Button</a>
     <a href="#" class="btn btn-success">Success Button</a>
     <a href="#" class="btn btn-info">Info Button</a>
     <a href="#" class="btn btn-warning">Warning Button</a>
     <a href="#" class="btn btn-danger">Danger Button</a>
     <a href="#" class="btn btn-link">Normal Link</a>
</div>

Button Sizes

<div class="container">
    <a href="#" class="btn btn-primary btn-lg">Large Button</a>
    <a href="#" class="btn btn-primary btn-md">Medium Button</a>
    <a href="#" class="btn btn-primary btn-sm">Small Button</a>
    <a href="#" class="btn btn-primary btn-xs">Extra Small Button</a>
</div>

Block Level Button

<div class="container">
    <a href="#" class="btn btn-primary btn-block">Block Button</a>
</div>

Active / Disabled Button

<div class="container">
    <a href="#" class="btn btn-primary active">Active Button</a>
    <a href="#" class="btn btn-primary disabled">Disabled Button</a>
</div>

Share this

Related Posts