Bootstrap List Group

We will discuss about bootstrap list group in this tutorial. List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic Example

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

  • Use <ul> element with .list-group class.
  • And then apply class .list-group-item to <li>.

Following example demonstrates this:

Adding Badges to List Group

You can add the badges component to any list group item and it will automatically be positioned on the right. Simply add <span class="badge"> tag within the <li> tag. Following example shows this:

Linking List Group Items

If you want to make links or clickable to list group items by using anchor tags instead of list items and also make a parent <div> instead of an <ul>. There is no need for individual parents around each element.

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, default or linked. Also includes .active state.

Add Custom Content to List Group

You can add nearly any HTML content with in the above linked list group like the below example shows.

Leave a Reply

Your email address will not be published. Required fields are marked *