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:

Home
Mails
Calls
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>

▶ Run the code

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.

Home
Mails
Calls
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>

▶ Run the code

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:

Home
Mails
Calls
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>

▶ Run the code

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>

▶ Run the code

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>

▶ Run the code

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>

▶ Run the code

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>

▶ Run the code

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:

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

❮ Prev