Elements

  • Home
  • UI Elements
  • Elements
List Group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic example with Badges

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
Linked items

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.

Cras justo odio Dapibus ac facilisis in Porta ac consectetur ac
Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros
Custom content

Add nearly any HTML within, even for linked list groups like the one below.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Tooltips

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Static Tooltip

Four options are available: top, right, bottom, and left aligned.

Tooltip in buttons

The way to initialize all tooltips on a page would be to select them by their data-toggle="tooltip" attribute

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.

Static Popover

Four options are available: top, right, bottom, and left aligned.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover in buttons

The way to initialize all tooltips on a page would be to select them by their data-toggle="popover" attribute

Dismiss on next click

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.

Dismissible popover

Others

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 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.
Static Progress Bars

Progress bars use some of the same button and alert classes for consistent styles.

Basic

60% Complete
40% Complete
20% Complete
60% Complete
80% Complete

Striped

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

Animated

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

Sizes

60% Complete
40% Complete
20% Complete

With label

60%
86/100

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Display text and animations

jQuery plugin for twitter bootstrap's progressbar for displaying text and animations. Add class .progress-animated to your progress-bar.

Default settings

Filled text

Filled text (nonpercentage)

Transition delay

Vertical Progress Bars

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.

Default Pagination

Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Colorful

Use any of the available button classes to quickly create a styled pagination.

Dynamic Pagination

This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes: .pagination (you change this one), .active and .disabled . Check out the demo.

Default

Page 1

    URL page link

    Page 1

      Synchronized pagination elements

        Page 1
          Labels and Badges

          Using Twitter Bootstrap, you may create inline labels, i.e. Label and annotate text and badges, i.e. indicators and unread counts.

          Available labels

          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
          Available badges

          Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

          Example Class
          1 badge badge-default
          2 badge badge-success
          4 badge badge-warning
          6 badge badge-danger
          8 badge badge-info
          10 badge badge-inverse
          Rating

          Bootstrap Rating is a jQuery plugin that creates a rating control that uses Bootstrap glyphicons for rating symbols.

          Options

          Default

          Half rating

          Customize tooltips

          Readonly rating with a value

          Custom icons

          Four options are available: top, right, bottom, and left aligned.