Elements
Over a dozen reusable components built to provide popovers, media objects, navigation, tooltips and much more.List Group
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.
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
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.
Contextual classes also work with .list-group-item-action. Note the addition of the hover styles here not present in the previous example. Also supported is the .active state; apply it to indicate an active selection on a contextual list group item.
Add nearly any HTML within, even for linked list groups like the one below.
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Tooltips
Hover over the links below to see tooltips:
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, top at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus click turpis massa tincidunt dui ut.
I can even contain HTML. Check me out!
Popovers
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
The way to initialize all tooltips on a page would be to select them by their data-toggle="popover" attribute
For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.
Options can be passed via data attributes or JavaScript.
Progress Bars
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.
Basic
Striped
Animated
Sizes
With label
Stacked
Pagination
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.
Badges
Using 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 badge.
| Badge | Class |
|---|---|
| Primary | badge badge-primary |
| Success | badge badge-success |
| Warning | badge badge-warning; |
| Danger | badge badge-danger |
| Info | badge badge-info |
| Dark | badge badge-dark |
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.
| Badge | Class |
|---|---|
| Primary | badge badge-pill badge-primary |
| Success | badge badge-pill badge-success |
| Warning | badge badge-pill badge-warning; |
| Danger | badge badge-pill badge-danger |
| Info | badge badge-pill badge-info |
| Dark | badge badge-pill badge-dark |
Rating
Bootstrap Rating is a jQuery plugin that creates a rating control that uses Bootstrap glyphicons for rating symbols.
Default
Half rating
Customize tooltips
Readonly rating with a value
Four options are available: top, right, bottom, and left aligned.
