Bootstrap List Group

A bootstrap list group provides the classes to create simple list items as well complex list items using the custom content. You can create list items using custom content like anchor links, buttons, and other contents.

Here is a simple example of Bootstrap List Group:-

Test it Live

• Computer
• Laptop
• Mouse
• Printer
• Keyboard

Let’s see how to create a Bootstrap list group.

Create Simple List Group

To create a basic list group with items, default content is <ul> tag. You need to just add the class .list-group as the class of the unordered list tag and class .list-group-item as the class of the list items.

To make first list item active, you have to use the class .active. See the example below for the basic list group.

Output

• Computer
• Laptop
• Mouse
• Printer
• Keyboard

Badges Inside List Group Items

You can also add badges to each list group items by adding <span> tag with class .badge to each list group item.

See the example below for the badges added to each list group item.

Output

• 9Computer
• 3Laptop
• 20Mouse
• 2Printer
• 18Keyboard

List Groups With Anchor Link Items

You can create bootstrap list group with the items as hyperlinks. To create this list group, you have the include anchor links with class .list-group-item inside the <div> tag with class .list-group.

You can also make the anchor list items active using the class .active. See the example below for the anchor link list group items.

Output

MirrorWatchWater BottleMoisturiserTable

List Group With Button Items

Creating the buttons as the list group items is the easier task using the bootstrap list group classes. Add the button type element with the class .list-group-item inside the div element with the class .list-group

Output

MirrorWatchWater BottleMoisturiserTable

Disable List Group Items

To disable a list group item, you need to just add the class .disabled to the list items which you want to make disabled.

See the below example for the disabled list group items.

Output

MirrorWatchWater BottleMoisturiserTable

Hover over the first list group item to see the disabled item. You can see that it will not allow you to click on the list items as it is in a disabled condition.

Create List Group Using Contextual Classes

To create different colored list group items, bootstrap also provides the contextual classes for the Bootstrap list group items.

See the table below with the description for each class.

Class Name	Description
.list-group-item-success	Used to display success list group item.
.list-group-item-info	Specify this class to show information in list group item.
.list-group-item-warning	Use this class to specify the warning message in list group item.
.list-group-item-danger	Display error message in list group items using this class.

Now, let us see the example showing the contextual classes for the different colored list group items.

Output

• Success Message item
• Informational Message item
• Warning Message item
• Error Message item

There are different message types which you can display using the contextual classes given above.

List Group Item with Custom Content

You can also add the other HTML content inside the list group items. Put your heading with its content inside the list group items.

To create an HTML content inside the list group item, put heading with class .list-group-item-heading and below the heading put your content paragraph using the class .list-group-item-text.

See the example below to create your own HTML content inside the list group items.

Output

Bootstrap List Group

A list group is the component of bootstrap to create custom list groups with items.

Disable Bootstrap List Group

You can use class .disabled to make items disable.

Button Bootstrap List Group

You can create list group using the button as list group items.