BOOTSTRAP 4 LIST GROUP

❮ Prev

In this section, you will learn how to create a list group with bootstrap, showing contextual variations, active and disabled states, badges, and more.

Basic List Group

List group is a very useful and powerful component of bootstrap. It is used to display a series of content or a list of items in a beautiful manner.

To create a List group in bootstrap add class .list-group class on any HTML list element and add .list-group-item class to the list items.

Example:

  1. Home
  2. Mails
  3. Calls
  4. Text Messages

Code:

Example

<ul class="list-group">
  <li class="list-group-item">Home</li>
  <li class="list-group-item">Mails</li>
  <li class="list-group-item">Calls</li>
  <li class="list-group-item">Text Messages</li
</ul>
Try It

Active or Disabled List Group Item

To make a list group item active add class .active to the list group item.

To make a list group item disabled add class .disabled to the list group item.

In the example below 'Home' is active and 'Mails' is disabled.

  1. Home
  2. Mails
  3. Calls
  4. Text Messages

Code:

Example

<ul class="list-group">
  <li class="list-group-item active">Home</li>
  <li class="list-group-item">Mails</li>
  <li class="list-group-item disabled">Calls</li>
  <li class="list-group-item">Text Messages</li
</ul>
Try It

Borderless List Group

To remove the border from the list group add class .list-group-flush to the list group, and also add .list-group class to the list.

Example:

  1. Home
  2. Mails
  3. Calls
  4. Text Messages

Code:

Example

<ul class="list-group list-group-flush">
  <li class="list-group-item">Home</li>
  <li class="list-group-item">Mails</li>
  <li class="list-group-item">Calls</li>
  <li class="list-group-item">Text Messages</li
</ul>
Try It

Links And Buttons in List Group

List group can also contain links and buttons.

It is not necessary to use a list element to create a list group but it is recommended to use a list element for better styling. You can use the div tag as well with the .list-group class.

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

Note: Do not use the .btn class with buttons in the list group.

In the example below the list, items are clickable where 'Bootstrap' is an active item.

HTML Bootstrap CSS JavaScript

Code:

Example

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">HTML</a>
  <a href="#" class="list-group-item list-group-item-action active">Bootstrap</a>
  <a href="#" class="list-group-item list-group-item-action">CSS</a>
  <a href="#" class="list-group-item list-group-item-action">JavaScript</a>
</div>
Try It

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

List Items with Badges

List group with badges is a very useful and powerful component of bootstrap.

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

To create a badge apply .badge class on <span> element.

To apply color code to the badge use .badge-* where * is color code.

You can also add .badge-pill to make your badge look like a pill.

Example:

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

Code:

Example

<ul class="list-group">
  <li class="list-group-item active">Home</li>
  <li class="list-group-item">Mails <span class="badge badge-warning badge-pill">30</span></li>
  <li class="list-group-item">Calls <span class="badge badge-warning badge-pill">24</span></li>
  <li class="list-group-item">Text Messages <span class="badge badge-warning badge-pill">5</span></li>
</ul>
Try It

List Group with Contextual classes

You can use contextual classes also with a list of groups. Contextual classes create stateful 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

Code:

Example

<ul class="list-group">
  <li class="list-group-item">Normal list item</li>
  <li class="list-group-item list-group-item-primary">primary list group item</li>
  <li class="list-group-item list-group-item-secondary">secondary list group item</li>
  <li class="list-group-item list-group-item-success">success list group item</li>
  <li class="list-group-item list-group-item-danger">danger list group item</li>
  <li class="list-group-item list-group-item-warning">warning list group item</li>
  <li class="list-group-item list-group-item-info">info list group item</li>
  <li class="list-group-item list-group-item-light">light list group item</li>
  <li class="list-group-item list-group-item-dark">dark list group item</li>
</ul>
Try It

Bootstrap list-group horizontal

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

Example:

  • 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

Code:

Example

<style>
  .list-group {
    flex-direction: row;
  }
</style>
<ul class="list-group">
  <li class="list-group-item">Normal list item</li>
  <li class="list-group-item list-group-item-primary">primary list group item</li>
  <li class="list-group-item list-group-item-secondary">secondary list group item</li>
  <li class="list-group-item list-group-item-success">success list group item</li>
  <li class="list-group-item list-group-item-danger">danger list group item</li>
  <li class="list-group-item list-group-item-warning">warning list group item</li>
  <li class="list-group-item list-group-item-info">info list group item</li>
  <li class="list-group-item list-group-item-light">light list group item</li>
  <li class="list-group-item list-group-item-dark">dark list group item</li>
</ul>
Try It

Conclusion

Bootstrap list group is a powerful component that allows you to create lists of items with different states and effects.

It is very easy to use and it is highly customizable. You can use it to create simple lists, to create lists with icons, to create lists with links, to create lists with buttons

It is also possible to create lists with different types of items, like list-group-item-primary, list-group-item-secondary, etc.

Points to remember:

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