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

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


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


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


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


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

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.