List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
The most basic list group is simply an unordered list with list items, and the proper classes. Add the badges component to any list group item and it will automatically be positioned on the right.
Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.
Use contextual classes to style list items, default or linked. Also includes .active state.
Add nearly any HTML within, even for linked list groups like the one below.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more.
Four options are available: top, right, bottom, and left aligned.
Hover over the links below to see tooltips:
Pellentesque {{dynamicTooltipText}} , sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in aliquam. Tincidunt lobortis feugiat vivamus at left eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur right nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas bottom pharetra convallis posuere morbi leo urna, fading at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus delayed turpis massa tincidunt dui ut.
I can even contain HTML. Check me out!
A lightweight, extensible directive for add small overlays of content, like those on the iPad, to any element for housing secondary information..
Four options are available: top, right, bottom, and left aligned.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
The popover directives provides several optional attributes to control how it will display
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Progress bars use some of the same button and alert classes for consistent styles.
A progress bar directive that is focused on providing feedback on the progress of a workflow or action.
It supports multiple (stacked) bars into the same <progress> element or a single <progressbar> element with optional max attribute and transition animations.
max value
No animation
Object (changes type based on value)
Place multiple bars into the same .progress to stack them.
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative. Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
A lightweight pagination directive that is focused on ... providing pagination & will take care of visualising a pagination bar and enable / disable buttons correctly!
Using Twitter Bootstrap, you may create inline labels, i.e. Label and annotate text and badges, i.e. indicators and unread counts.
Add any of the below mentioned modifier classes to change the appearance of a label.
| Labels | Class |
|---|---|
| Default | label label-default |
| Success | label label-success |
| Warning | label label-warning; |
| Danger | label label-danger |
| Info | label label-info |
| Inverse | label label-inverse |
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
| Name | Example | Class |
|---|---|---|
| Default | 1 | badge badge-default |
| Success | 2 | badge badge-success |
| Warning | 4 | badge badge-warning |
| Danger | 6 | badge badge-danger |
| Info | 8 | badge badge-info |
| Inverse | 10 | badge badge-inverse |
Rating directive that will take care of visualising a star rating bar.
Four options are available: top, right, bottom, and left aligned.
Four options are available: top, right, bottom, and left aligned.