tutorialstonight logo
A Platform To Learn To Code

BOOTSTRAP4 LIST GROUP

List group is very useful and powerfull component of bootstrap4. It is used to display a series of content, or a list of items in beautifull manner.

Basic list group

List group is nothing but an unordered list with class .list-group and list items with class .list-group-item

  • Home
  • Mails
  • Calls
  • Text Messages

Links And Buttons in List Group

You can add <a> tags and <button> tags to the list items.

It is not necessary to use unordered list to create list group in bootstrap, you can use div tag as well with .list-group class.

To create actionable list group item add .list-group-item-action class to the <a> tag or <button> tag.

Do not use .btn class with buttons in list group.

List group can be used to show any product detail or can be used as webpage sidebar to show related links.


List Items With Badges

You can add badges to list group item to show number of unread counts.

To create a badge use .badge class, to add color code to the badge use .badge-* where is color code and add class .badge-pill to make it in shape of pill.

  • Home
  • Mails 30
  • Calls 24
  • Text Messages 5

List Group with Contextual classes

You can use contextual classes also with list group. Contextual classes creates statefull background and color.

Look at the example below:

  • Normal list item
  • primary list group item
  • secondary list group item
  • success list group item
  • danger list group item
  • warning list group item
  • info list group item
  • light list group item
  • dark list group item

Bootstrap list-group horizontal

To create horizontal bootstrap list group just add flex-direction: row to .list-group class.

  • Normal list item
  • primary list group item
  • secondary list group item
  • success list group item
  • danger list group item
  • warning list group item
  • info list group item
  • light list group item
  • dark list group item

points to remember Points to remember:
  1. In bootstrap, list group is a collection of items in a beautiful manner
  2. To create a basic list group use unordered list with class .list-group and items with .list-group-item
  3. To make list group horizontal just add flex-direction: row to .list-group class.