## Extended Elements

### Multiple File Upload |  |
### CSS3 Animations | ### Animation | `<h3 class="animated rubberBand">Animation</h3>` For all more animation classes like `rubberBand`, please refer to http://daneden.github.io/animate.css/
### Star Rating |  | `<div class="raty"></div>`
### Toggle Switch |  | `<input data-no-uniform="true" type="checkbox" class="iphone-toggle">`
### Auto Growing Textarea | Press enter here, it will grow automatically. | `<textarea class="autogrow"></textarea>`
### Popover | Click for popover | `<a href="#" class="btn btn-danger" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?" title="A Title">hover for popover</a>`
### Dialog | Click for dialog |
### Tooltip | Hover for tooltip | `<a href="#" title="Tooltip, you can change the position, for example use data-placement="left"." data-toggle="tooltip" class="btn btn-warning">Hover for tooltip</a>`

## Progress Bars

### Basic

60%

### Animated

### Additional Colors

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

## Labels and Annotations

Labels | Markup
--- | ---
Default | `<span class="label">Default</span>`
Success | `<span class="label label-success">Success</span>`
Warning | `<span class="label label-warning">Warning</span>`
Important | `<span class="label label-important">Important</span>`
Info | `<span class="label label-info">Info</span>`

## Alerts

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

## Notifications

Click buttons below to see Pop Notifications.

## Ajax Loaders

From / More http://ajaxload.info/
Help development of Charisma
Donate

### Settings

Here settings can be configured...