General UI Elements ui setting and more

Alerts

Warning! Lorem ipsum dolor sit amet, consectetur adipiscing elit. ×
Success! Vivamus vestibulum posuere est eu tincidunt. ×
Info! Morbi sed nibh ac tortor laoreet blandit sed eu ligula. ×
Error! Morbi vitae arcu in neque luctus elementum. ×

Badge

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>
Inverse <span class="label label-inverse">Inverse</span>

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Tooltip and Popover

Tooltip on top Tooltip on right

Tooltip on bottom Tooltip on left

Popover on top Popover on right

Popover on bottom Popover on left

Pagination & Sizes

Pagination Alignment

Use .pagination-centered or .pagination-right to align your pagination.

Progress Bar

Default

Stacked

Striped

Animated

Browser Support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.