Bootstrap reusable components built to provide alerts, notifications, progress bars, labels, badges, wells, thumbnails, pagination, shapes and list groups.

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Wrap any text and an optional dismiss button in .alertand one of the four contextual classes (e.g., .alert-success) for basic alert messages.

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

---

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

---

Basic

Labeled

Striped

Animated

Stacked

Sizes

Add .progress-xs, .progress-s, .progress-m, .progress-lor .progress-xlto resize the badges.

Theme colors

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more. By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

---

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

---

Default

Theme integration

Add .pagination-themeto color paginator with theme color .pagination-smfor additional sizes.

Disabled and active states

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

Sizes

Add .pagination-lgor .pagination-smfor additional sizes.

.pagination-lg .pagination-sm

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Pager Aligned

Pager disabled

Easily shape images by adding a .img-rounded .img-circle .img-thumbnailto your images.

---

Easily create text labels adding a <span class="label">to your code.

---

Basiclabel

BasicDefaultPrimarySuccessInfoWarningDangerInverse

Theme colorlabel

Theme Label

Iconedlabel

Iconed

Insetlabel

Add .label-insetto the label.

Inset label

Label Sizes

Add .label-xs, .label-s, .label-m, .label-lor .label-xlto resize the labels.

Label XSLabel SLabel MLabel LLabel XL

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

---

Basicbadges

123456

Theme colorbadges 9

Iconedbadges

Insetbadges

Badges Sizes

Add .badge-xs, .badge-s, .badge-m, .badge-lor .badge-xlto resize the badges.

1-XS2-S3-M4-L5-XL

Easily create wells by adding a <div class="well">

Add .well-lgto make it larger

Add .well-smto make it smaller

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

---

Basic

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

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

Badges

Add the badges component to any list group item and it will automatically be positioned on the right.

• 14 Cras justo odio

Linked items

Linkify list group items by using anchor tags instead of list items (that also means a parent divinstead of an ul). No need for individual parents around each element.

Disabled items

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

Contextual classes

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

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