Bootstrap Buttons

BootStrap Button Styles

These BootStrap button classes can be applied to style any element a href, button or input.

Class What it indicates
btn Classic Default or Standard button
btn-primary Enhanced appearance – identifies the primary action in a group of buttons
btn-success Denotes a successful or positive action
btn-info Indicates information messages or alerts
btn-warning Indicates caution should be taken with this action
btn-danger Depicts a risky or negative action
btn-link ones down a button by making it appear like a link but maintains button behavior

Examples of BootStrap Buttons:


<a class="btn" type="button" href="">Default (Gray) Button</a>

Standard gray button with gradient.

<a class="btn btn-primary" type="button" href="">Primary (Blue) Button</a>

Provides extra visual weight and identifies the primary action in a set of buttons.

<a class="btn btn-info" type="button" href="">Info (Light Blue) Button</a>

Used as an alternative to the default styles.

<a class="btn btn-success" type="button" href="">Success (Green) Button</a>

Indicates a successful or positive action.

<a class="btn btn-warning" type="button" href="">Warning (Orange) Button</a>

Indicates caution should be taken with this action.

<a class="btn btn-danger" type="button" href="">Danger (Red) Button</a>

Indicates a dangerous or potentially negative action.

<a class="btn btn-inverse" type="button" href="">Inverse (Dark Gray) Button</a>

Alternate dark gray button, not tied to a semantic action or use.

Example of Buttons Sizes:


<a class="btn btn-large btn-primary" type="button" href="">Large Blue Button</a>


<a class="btn btn-large" type="button" href="">Large (Gray) Button</a>


<a class="btn btn-primary" type="button" href="">Default Size Blue Button</a>


<a class="btn" type="button" href="">Default Size (Gray) Button</a>


<a class="btn btn-small btn-primary" type="button" href="">Small Blue Button</a>


<a class="btn btn-small" type="button" href="">Small (Gray) Button</a>


<a class="btn btn-mini btn-primary" type="button" href="">Mini Blue Button</a>


<a class="btn btn-mini" type="button" href="">Mini (Gray) Button</a>

Create block level buttons—those that span the full width of a parent:

<a class="btn-large btn-block btn-primary" type="button" href="">Blue Clock Level Button</a>


<a class="btn-large btn-block" type="button" href="">Default (Gray) Level Button</a>


All of the CyberChimps themes that use the Twitter Bootstrap (not Responsive nor Responsive Pro) incorporate its Buttons. You can use these Bootstrap Buttons in an Page, Post or even a Text Widget.

Did this documentation not suffice? Have more questions? Please post a support topic in the forum.