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
  • 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

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
    ... ...

Labels & Badges

1. Labels

  • Bootstrap labels with a few additional colors, sizes and styles.
  • Additional colors are:
    • .label-pink
    • .label-purple
    • .label-grey
    • .label-light
    • .label-yellow
    • .label-transparent
  • Additional sizes are:
    • .label-sm
    • .label-lg
    • .label-xlg

  • Arrowed label styles:
    • .arrowed
    • .arrowed-right
    • .arrowed-in
    • .arrowed-in-right


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:

2. Animated Icons

  • There are also some animations defined which you can use for icons or other elements:
    1. ringing
    2. vertical
    3. hand-pointer
    4. wrenching
    5. blinking
    6. 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:
  • 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
  • Validation State

    Input validation state classes are:
    1. .has-warning
    2. .has-error
    3. .has-success
    4. .has-info
    For example:
    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

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

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:
    1. When you don't use container option of tooltip, you should add the color class to the element:
        Show Tooltip
      and then:
    2. When you are using container option of tooltip, you should change the template option:
       '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:
     '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});
    or slider:
    //find "range slider tooltip example" in mustache/app/views/assets/scripts/form-elements.js
    if(! ui.handle.firstChild ) {
      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

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)
       else $(this).removeClass('dropup');
  • Use .dropdown-caret to add a caret.
    Use .dropdown-close & .dropdown-closer for dropdown elements appear closer to invoker element:
    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.
  • 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:

Other elements

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
    6. .progress-small
    7. .progress-mini
  • For circular progress bars you can use Easy Pie Chart plugin.