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

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.

Links and button items

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.

Be sure to not use the standard .btn classes here.

Disabled items

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

Contextual classes

Use contextual classes to style list items with a stateful background and color.

• Dapibus ac facilisis in
• This is a primary list group item
• This is a secondary list group item
• This is a success list group item
• This is a danger list group item
• This is a warning list group item
• This is a info list group item
• This is a light list group item
• This is a dark list group item

Custom content

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

Product finder

Product search

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel with footer

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

SDS search