# Elements

## Buttons

### 1. Buttons

- Bootstrap buttons with a few additional colors and sizes:
  - `.btn-info2`
  - `.btn-purple`
  - `.btn-pink`
  - `.btn-light`
  - `.btn-yellow`
  - `.btn-grey`
  - `.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

-       ...
        ...

## Labels & Badges

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

## Icons

### 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`

## Form

### 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`

- # Validation State

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

## Tabs

### 1. Tabs

- Bootstrap tabs:

           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();
      })

## Accordion

### 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();
      });

## Tooltip

### 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:

          $('.my-tooltip-link').tooltip();

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

## Dropdown

### 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)
            $(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`:

## 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`
  7. `.progress-small`
  8. `.progress-mini`

- For circular progress bars you can use Easy Pie Chart plugin.