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.

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="https://example.com">Default (Gray) Button</a>

Standard gray button with gradient.

<a class="btn btn-primary" type="button" href="https://cyberchimps.com">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="https://cyberchimps.com">Info (Light Blue) Button</a>

Used as an alternative to the default styles.

<a class="btn btn-success" type="button" href="https://cyberchimps.com">Success (Green) Button</a>

Indicates a successful or positive action.

<a class="btn btn-warning" type="button" href="https://cyberchimps.com">Warning (Orange) Button</a>

Indicates caution should be taken with this action.

<a class="btn btn-danger" type="button" href="https://cyberchimps.com">Danger (Red) Button</a>

Indicates a dangerous or potentially negative action.

<a class="btn btn-inverse" type="button" href="https://cyberchimps.com">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="https://cyberchimps.com">Large Blue Button</a>

 

<a class="btn btn-large" type="button" href="https://cyberchimps.com">Large (Gray) Button</a>

 

<a class="btn btn-primary" type="button" href="https://cyberchimps.com">Default Size Blue Button</a>

 

<a class="btn" type="button" href="https://cyberchimps.com">Default Size (Gray) Button</a>

 

<a class="btn btn-small btn-primary" type="button" href="https://cyberchimps.com">Small Blue Button</a>

 

<a class="btn btn-small" type="button" href="https://cyberchimps.com">Small (Gray) Button</a>

 

<a class="btn btn-mini btn-primary" type="button" href="https://cyberchimps.com">Mini Blue Button</a>

 

<a class="btn btn-mini" type="button" href="https://cyberchimps.com">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="https://cyberchimps.com">Blue Clock Level Button</a>

 

<a class="btn-large btn-block" type="button" href="https://cyberchimps.com">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. https://cyberchimps.com/forum/

Categories: