Bootstrap List group

tutorial and example
tutorial and example

Bootstrap list group provides a group of a list of items. The most basic list is an unordered list.

We can use <ul> element with .list-group class and <li> element with .lsit-group-item.

Let us see an example of Bootstrap List Groups:

Try Now

List Group With Badges

We can also use badges with list group. It will automatically position the right.

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

Let us see an example of Bootstrap List Group With Badges:

Try Now

List Group With Linked Items

We can create a hyperlink of the list group. By default it is grey color when hover on it. You have to use <div> element instead of <ul> and <a> instead of <li> element.

Let us see an example of Bootstrap List Group With Linked Items:

Try Now

Bootstrap Active State

The bootstrap active state is used to highlight the current item. We have to use .active class.

Let us see an example of Bootstrap Active State:

Try Now

Bootstrap Disabled state

The bootstrap disabled state is used to disabled the current item. You have to use .disabled class.

Let us see an example of Bootstrap Disabled State:

Try Now

Bootstrap Contextual Classes

Bootstrap contextual classes is used to color the list items. There are various list item’s color classes:

  • .list-group-item-success
  • .list-group-item-info
  • .list-group-item-warning etc.

Let us see an example of Bootstrap Contextual Classes

Try Now