1. Buttons

Bootstrap buttons with a few additional colors and sizes:
- .btn-info2
- .btn-purple
- .btn-pink
- .btn-light
- .btn-yellow
- .btn-grey
- .btn-xlg
- .btn-mini
- .btn-minier
```
 
	
 
   
   Click
 
```

Add .no-hover and .no-border for more options:

Add .icon-on-right when icon is on right:
```
 
```
Add .icon-only when there is only icon:
```
 
```

2. White Buttons

Add .btn-white for white button backgrounds:
```
 
```
Add .btn-bold for bolder bottom border and .btn-round for slightly rounder corner:
```
 
```

3. Large Buttons

Large application buttons have .btn-app class:
```
 
```
You can use .width-auto if your text is long:
```
 
   
     Longggggg textttttttt  
 
```

4. Button Groups

There are a few additional button group classes:
1. .btn-corner so that first and last buttons have round corners
2. .btn-overlap so that there's no space between buttons
```
 
  
    
    
  
  ...
  ...
 
```

1. Labels

Bootstrap labels with a few additional colors, sizes and styles.
```
 Success!
```
Additional colors are:
- .label-pink
- .label-purple
- .label-grey
- .label-light
- .label-yellow
- .label-transparent
Additional sizes are:
- .label-sm
- .label-lg
- .label-xlg
label-lg
```
 label-lg
```
Arrowed label styles:
- .arrowed
- .arrowed-right
- .arrowed-in
- .arrowed-in-right
Promotion!
```
 Promotion!
```

2. White Labels

```
 Promotion!
```
Please note that white labels don't have "arrow" option

3. Badges

Bootstrap badge with a few additional colors:
- .badge-info
- .badge-primary
- .badge-success
- .badge-danger
- .badge-warning
- .badge-inverse
- .badge-pink
- .badge-purple
- .badge-grey
- .badge-light
- .badge-yellow
- .badge-transparent
4 new
```
 4 new
```

1. Icons

Curretly Fontawesome and Glyphicons are included but you can use any font library.
You should now add .ace-icon class to all icons except those that don't need any special styles.
If you want, you can change .ace-icon to something else.
For more info about this, please see Fontawesome section.

A .menu-icon class should be added to sidebar icons:

 
   
     
       
       Dashboard

2. Animated Icons

There are also some animations defined which you can use for icons or other elements:

ringing
vertical
hand-pointer
wrenching
blinking
pulsating

In order to use them, you should define a new CSS class:

.my-pulsating-icon {
                  /* pulsating duration repetition timing_function delay */
     -moz-animation: pulsating 2s 2 linear 1s;
  -webkit-animation: pulsating 2s 2 linear 1s;
       -o-animation: pulsating 2s 2 linear 1s;
      -ms-animation: pulsating 2s 2 linear 1s;
          animation: pulsating 2s 2 linear 1s;
}

There are also some pre-defined classes:
1. .icon-animated-bell
2. .icon-animated-vertical
3. .icon-animated-hand-pointer
4. .icon-animated-wrench
However, some browsers have issues with animated icons.
Please see Issues section for more info

3. Fontawesome

Fontawesome is included and to use it you should have its CSS file included in your document:
```
 <link rel="stylesheet" href="path/to/assets/css/font-awesome.css" />
```
Font files should be in the right directory: path/to/assets/fonts
There is also a CDN option in which CSS and font files are hosted for you, which you can use in your production site:
```
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
```

4. Glyphicons

Glyphicons is Bootstrap's default font icon library.
Font files should be in the right directory: path/to/assets/fonts

1. Forms

For more info please refer to Bootstrap form and Input group

Horizontal form example:

 
   
      Label

Input elements can have grid column classes such as .col-xs-10.col-sm-5 or .form-control
To reduce spacing (padding) between label and input element, you can add .no-padding-right or .no-padding-left classes to label element.
If you want less padding and size for option elements in select dropdowns add .no-option class for example when option element has no value or text:
```
 
```

2. Input

Input with Icon
For inputs with icon, wrap input element and the icon inside a .input-icon or .input-icon.input-icon-right element:
```
  
  


  
  
```
A few additional sizes :
- .input-mini
- .input-small
- .input-medium
- .input-large
- .input-xlarge
- .input-xxlarge

Input validation state classes are:

.has-warning
.has-error
.has-success
.has-info

For example:


   Input with warning
   
      
         
         
      
   
   
      Warning tip help!

3. 3rd Party & Custom Inputs

There are some third party and custom input elements included as well.
For more info about each one, please refer to the relevant section.

1. Tabs

Bootstrap tabs:



 
   
      Home
   
   
      Messages
   
 

 
   
     home tab content
   
   
     profile tab content

2. Position

For tab buttons to appear below tab content, add .tabs-below to .tabbable:
```
 
 
```
Add .tabs-left and .tabs-right to .tabbable element, for tabs to appear on right or left

3. Color & Size

Add .tab-color-blue and .background-blue classes to .nav-tabs element for blue tabs:
```
 
```
Add .tab-size-bigger to .nav-tabs for larger tab buttons
Add .tab-space-1 .tab-space-2 .tab-space-3 .tab-space-4 to .nav-tabs for more space between tab buttons
Add .padding-2 .padding-4 ... .padding-32 to .nav-tabs for less/more padding for tab buttons
Add .padding-2 .padding-4 ... .padding-32 to .tab-content for less/more padding for tab content
For example, tab buttons on FAQ page have the following class names:
```
 
```
and tab content is:
```
 
```

4. Notes

Some times you want to have a chart or some elements inside a currently hidden tab pane.
You may notice that element may not render correctly.
For that you should draw/redraw the element when a tab pane is shown:
```
$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  //if( $(e.target).attr('href') == "#home" ) drawChartNow();
  //if($(e.target).is('#my-chart-tab')) drawChartNow();
})
				
```

1. Accordion

For accordion, Bootstrap panels are used.
You can add .accordion-style1 & .accordion-style2 classes:


 
  
   
     
       
        Group Item #1
     
   
  
  
    
      Panel Body

2. Toggle Icon

Inside .accordion-toggle or data-toggle="panel" element, you can add an icon with data-icon-show and data-icon-hide attributes, and the icons will be swapped on panel(accordion) toggle:
```
 
```

3. Notes

Same note about tab panes also applies here.
That is sometimes when an element is inside a hidden panel, you should redraw the element when the panel is shown:
```
$('#accordion').on('shown.bs.collapse', function (e) {
  //if($(e.target).is('#collapseTwo')) drawChartNow();
});
```

1. Tooltip

Bootstrap tooltips with a few additional colors:
1. .tooltip-error
2. .tooltip-warning
3. .tooltip-success
4. .tooltip-info

To use a color, you have two options:

When you don't use container option of tooltip, you should add the color class to the element:
```
 
  Show Tooltip
 
```
and then:
```
 $('.my-tooltip-link').tooltip();
```

When you are using container option of tooltip, you should change the template option:

$('.my-tooltip-link').tooltip({
 'container': 'body',
 'template': '<div class="tooltip tooltip-error"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});

2. Notes

When using tooltips inside tabs, panels and some other elements, its best to use container:'body' options, so that the element's layout is not affected:
```
 
  Show Tooltip
 
```
```
$('.my-tooltip-link').tooltip({
 'container': 'body'
});
```
If you want to use a tooltip inside a modal dialog, again you shouldn't use container:'body' option of the tooltip.
Because the tooltip will appear below our modal box as the z-index value of "tooltips" is defined less than that of "modals".

If there's an element for which you may be using tooltips frequently, it's better to pre-create a (static) tooltip and show or move it when needed.
For example, dashboard's piechart or form element's horizontal range slider has such tooltip:

//find "pie chart tooltip example" in mustache/app/views/assets/scripts/index.js
var tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
//and when necessary
tooltip.show().children(0).text(tip);//dynamically change its text
tooltip.css({top: y, left: x});
tooltip.hide();

or slider:

//find "range slider tooltip example" in mustache/app/views/assets/scripts/form-elements.js
if(! ui.handle.firstChild ) {
 $(ui.handle).
  append("tooltip right in' style='display:none; left:16px; top:-6px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>")
}
$(ui.handle.firstChild).show().children().eq(1).text(val);//update (.tooltip-inner)'s text and show it

Sometimes you need to show a tooltip on left or right depending on its position.
The following code can be used to do so:

//placement parameter can be a function
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
function tooltip_placement(context, source) {
  var $source = $(source);
  var $parent = $source.closest('div.container_selector')//or maybe 'body' > $parent = $('body')

  //get containers offset and width
  var off1 = $parent.offset();
  var w1 = $parent.width();

  //get elements offset
  var off2 = $source.offset();

  //this is approximate and optional, you can change it
  if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
  return 'left';
}

3. Popovers

Bootstrap popovers with a few additional colors:
1. .popover-error
2. .popover-warning
3. .popover-success
4. .popover-info
Usage is similar to tooltips.
Similar "tooltip" notes should also be considered when using popovers.

1. Colors

For navbar user dropdowns please refer to Navbar dropdowns
There are a few additional dropdown menu colors:
1. .dropdown-default
2. .dropdown-info
3. .dropdown-primary
4. .dropdown-success
5. .dropdown-warning
6. .dropdown-danger
7. .dropdown-inverse
8. .dropdown-purple
9. .dropdown-pink
10. .dropdown-grey
11. .dropdown-light
12. .dropdown-lighter
13. .dropdown-lightest
14. .dropdown-yellow
15. .dropdown-yellow2
16. .dropdown-light-blue
```
 
   Action
   Another action
   Something else here
 
```

2. Options

You can use data-position="auto" attribute for a "dropdown" to become a dropup when appropriate:

...

You may also need to do this on special cases, for example on "dropdown-hover" elements or when elements are inside a container with overflow:hidden or overflow:scroll

 //change a dropdown to "dropup" depending on its position
 $('.dropdown-hover').on('mouseenter', function() {
   var offset = $(this).offset();

   var $w = $(window)
   if (offset.top > $w.scrollTop() + $w.innerHeight() - 100)
      $(this).addClass('dropup');
   else $(this).removeClass('dropup');
 });

Use .dropdown-caret to add a caret.
Use .dropdown-close & .dropdown-closer for dropdown elements appear closer to invoker element:
Show menu
- ...
```
 Show menu
 
   ... 
 
```
Note the .inline & .pos-rel wrapper element may come in handy when using dropdowns inside content areas.
Add .dropdown-only-icon for an icon or image only dropdown:
```
 
  ...
 
```
To show dropdown menu on mouse hover, add .dropdown-hover on parent container and remove data-toggle="dropdown" attribute.
```
 Show menu
 
   ... 
 
```
Add .dropdown-50 .dropdown-75 .dropdown-100 .dropdown-125 .dropdown-150 for smaller dropdown width:
```
 
```

For submenu you can add .dropdown-hover class to parent li:


 
   More options
   
     Second level link

1. Progressbar

Bootstrap progress bars with a few additional colors and sizes:
1. .progress-bar-pink
2. .progress-bar-purple
3. .progress-bar-yellow
4. .progress-bar-inverse
5. .progress-bar-grey
7. .progress-small
8. .progress-mini
```
 
   
 
```
For circular progress bars you can use Easy Pie Chart plugin.

Elements

Buttons