Dropdowns

Header
Disabled menu items

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Dropup variation

Trigger dropdown menus above elements by adding .dropupto the parent.

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Jquery UI

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Accordions

Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Pagination

Default

Disabled and active states

Links are customizable for different circumstances. Use .disabledfor unclickable links and .activeto indicate the current page.

Sizing

Fancy larger or smaller pagination? Add .pagination-lgor .pagination-smfor additional sizes.

Pager

Default

By default, the pager centers links.

Aligned links

Alternatively, you can align each link to the sides:

Optional disabled state

Pager links also use the general .disabled utilityclass from the pagination.

Label

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges

Inbox 42

  • 14 List Item with Badge
  • 2 List Item with Badge

Thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

100%x180
100%x180
100%x180
100%x180

Alerts

Dismissible alerts

Build on any alert by adding an optional .alert-dismissibleand close button.

Links in alerts

Use the .alert-linkutility class to quickly provide matching colored links within any alert.

Progress bars

Basic example

60% Complete

With label

Remove the <span>with .sr-onlyclass from within the progress bar to show a visible percentage.

60%

Contextual alternatives

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

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

Striped

Uses a gradient to create a striped effect. Not available in IE9 and below.

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

Animated

Add .activeto .progress-bar-stripedto animate the stripes right to left. Not available in IE9 and below.

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

Stacked

Place multiple bars into the same .progressto stack them.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

List group

Basic example

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Badge

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1Morbi leo risus
  • 7Porta ac consectetur ac
  • 9Vestibulum at eros

Button items

Disabled items

Add .disabledto a .list-group-itemto gray it out to appear disabled.

Contextual classes

Use contextual classes also includes .activestate.

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