Bootstrap List Group

Bootstrap list group is used to design the html lists. To create a basic list group you have to use an <ul> element with .list-group class and <li> elements with .list-group-item class.

Example:

Add Badges

If you want to add a badge to the list group you should use the <span class = "badge"> within the <li> element.

Example:

Linking Item with List Group

If you want to link the list group item you should use <div> instead of <ul> and <a> instead of <li>.

Example:

Active and Disabled State

To highlight the current item you can add the .active class and to disable an item you can add the .disabled class:

Example of active class:

Example of disable class:

Contextual Class with List Group

If you want to colour the list group item you should use .list-group-item-success, .list-group-item-info, .list-group-item-warning, and .list-group-item-danger classes.

Example: