Please wait...

List Group

  1. Home
  2. Basic UI

Basic List Group

The most basic list group is simply an unordered list with list items, and the proper classes.
  • 50% Chrome
  • 35% Firefox
  • 9% Opera
  • 2% Safari
  • 3.5% Internet Explorer

List Group With Badges

Add the badges component to any list group item and it will automatically be positioned on the right.
  • 50 unread Inbox
  • 100 read Notification
  • 100+ Sent
  • 50 Favorite
  • 70 Personal

List Group With Disabled Items

Add .disabled to a .list-group-item to gray it out to appear disabled.
50% Chrome 35% Firefox 9% Opera 2% Safari 3.5% Internet Explorer

List Group With 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.
50% Chrome 35% Firefox 9% Opera 2% Safari 3.5% Internet Explorer

List Group With Button Items

List group items may be buttons instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element. Don't use the standard .btn classes here.

List Group With Media

Linkify list group items by using anchor tags
Jhon Doe
Jhon Doe
CEO & Director
lens
Lucy Doe
Lucy Doe
Web Developer
lens
Mike Anderson
Mike Anderson
Web Designer
lens

Custom Content

Linkify list group items by using anchor tags

Heading 1

Lorem ipsum dolor sit amet

Heading 2

Ut duo atqui exerci dicunt,

Heading 3

Duis nemore probatus ne quo

Contextual Classes

Use contextual classes to style list items, default or linked. Also includes .active state.
  • 50% Chrome
  • 35% Firefox
  • 9% Opera
  • 2% Safari
  • 3.5% Internet Explorer

List Group Items With Material Colors

Use material colors classes (eg., .list-group-bg-pink, .list-group-bg-cyan) etc. to quickly create list group in material colors
  • 50% Chrome
  • 35% Firefox
  • 9% Opera
  • 2% Safari
  • 3.5% Internet Explorer