Bootstrap Buttons

All of CyberChimps’ WordPress themes that use the Twitter Bootstrap incorporate its Buttons. You can use these Bootstrap Buttons in an Page, Post or even a Text Widget.

BootStrap Button Styles

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

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>


Top Tutorials about BootStrap Buttons

StackOverflow :

How to make a smaller button in bootstrap?

StackOverflow :

How to put a link on a button with bootstrap?

TutorialRepublic :

How to create and modify buttons with BootStrap


Hex Codes for BootStrap Buttons

HTML Color Shades / Hex Codes

Tutorials for HTML CSS

Here is a list of links where you can learn about html and css.

TutsPlus : The Best Way to Learn HTML
TutsPlus : The Best Way to Learn CSS
Team TreeHouse
Mozilla : Learn CSS (Web Development)

Website Setup : HTML Tutorial (for Beginners) – Learn HTML, step-by-step
Full Stack Academy : Courses to help become a professional software developer
Lynda : Web Interactive CSS Tutorials
Khan Academy : Free Tutorials

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