Button Styles

Bootstrap provides beautiful, pre-styled button classes that work on <button>, <a>, and <input> elements.

Button Colors

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary (Blue)</button>
<button class="btn btn-success">Success (Green)</button>
<button class="btn btn-info">Info (Light Blue)</button>
<button class="btn btn-warning">Warning (Orange)</button>
<button class="btn btn-danger">Danger (Red)</button>
<button class="btn btn-link">Link Style</button>

Button Sizes

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">Extra Small</button>

Block-Level Button

<button class="btn btn-primary btn-block">
    Full-width button
</button>

Button States

<button class="btn btn-primary active">Active</button>
<button class="btn btn-primary" disabled>Disabled</button>

Button Groups

<div class="btn-group">
    <button class="btn btn-primary">Left</button>
    <button class="btn btn-primary">Middle</button>
    <button class="btn btn-primary">Right</button>
</div>

Button Toolbar

<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">4</button>
    </div>
</div>

On Other Elements

<a href="#" class="btn btn-success">Link Button</a>
<input type="submit" class="btn btn-primary" value="Submit">