Tutorial on How to make Bootstrap 3 List Groups

A list group is used to display an unordered or a div in a list view, the list view mainly used inside the menu or display some list of content. Now let us discuss Bootstrap 3 List Groups, which is a very flexible component for displaying lists of elements in a beautiful manner.

bootstrap 3 list group

Basic List Group

To make a basic list group take an unordered list and place class name .list-group on ul tag and class name .list-group-item on li tag and basic list, the group is done for bootstrap 3.
Example:

Try it Yourself

• First item
• Second item
• Third item

Badges on list group:

.badge inside a list group li and you have done a list group with badges
example:

Try it Yourself

• First item 12
• Second item 9
• Third item 15

Linked Items List Group

To create a list group with linked item, take a basic list group and place div in the position of ul and place anchor tag in the position of li
Example:

Try it Yourself

First item
Second item
Third item

List Group With the active item

Place class name .actine with class name .list-group-item in any list group item and it will become a blue background with a white text element.
Example:

Try it Yourself

First item
Second item
Third item

Disabled List group item

Place class name .disabled with class name .list-group-item in any list group item and it will become a light gray background element and will not be clickable.
Example:

Try it Yourself

First item
Second item
Third item

List Group with various color

In the case of list group there 5 background color and accordingly text color in bootstrap 3 list group,

• Deep Blue with white text color
  use .active the class name in a list group item to make the deep blue background with white text color
• light green with deep green text color
  use .list-group-item-success the class name in a list group item to make the light green background with deep green text color
• light blue or sky color deep blue text color
  use .list-group-item-info the class name in a list group item to make light blue or sky background with deep blue text color
• light yellow with deep yellow text color
  use .list-group-item-warning the class name in a list group item to make the light yellow background with deep yellow text color
• and light red with deep red text color
  use .list-group-item-danger the class name in a list group item to make the light red background with deep red text color

Example:

Try it Yourself

First item
Secondt item
Third item
Fourth item
Fifth item

Custom Content in Bootstrap 3 List Group

You can use any HTML tag inside a list group item like heading or para etc.
Example:

Try it Yourself

• its a heading

  its a peragraph

• its a heading

  its a peragraph

• its a heading

  its a peragraph

in this post we have learned about Bootstrap 3 List Groups, I hope it helped you. please provide your comment to make the site more useful and better.

Thanks for reading