List

Basic List

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item.

• 1. Active
• 2. Aenean leo ligula
• 3. Phasellus viverra nulla
• 4. Aenean vulputate eled
• 5. Disabled

List Group Bordered

The current code you are trying is a descendant selector and will only work when <li> is the child of .list-group-bordered to the wrap.

• 1. Active
• 2. Aenean leo ligula
• 3. Phasellus viverra nulla
• 4. Aenean vulputate eled
• 5. Disabled

List Group With Dividered

The trick is to create an extra view for collapse group layout and last child layout with .list-group-dividered to the wrap.

• 1. Active
• 2. Aenean leo ligula
• 3. Phasellus viverra nulla
• 4. Aenean vulputate eled
• 5. Disabled

Badges List

To create a badge, create a <span> element with class .badge inside the list item.

• 14 Aenean leo ligula
• 10 Phasellus viverra nulla
• 3 Aenean vulputate eled
• 2 Maecenas tempus tellus
• 1 Quisque rutrum

Linked Items

Just replace the <li> with <a> tag and use <div> element as a parent instead of <ul>.

Background

Add the color by .bg-* in class and Also add the class with .bg-inherit

Contextual Classes

The classes for coloring list-items are: .list-group-item-success, list-group-item-info, list-group-item-warning, .list-group-item-danger, and .list-group-item-dark.

• Aenean leo ligula
• Phasellus viverra nulla
• Aenean vulputate eled
• Maecenas tempus tellus
• Quisque rutrum

Custom Content

Bootstrap provides the classes .list-group-item-heading and .list-group-item-text which can be used as follows.

With Gap

Add .list-group-gap in class for gap the items.

• Inbox
• Profile visits
• Call
• Messages
• Bookmarks

List notifications

Create a list of notification with description and icon.