BOOTSTRAP 4 LIST GROUP

List group is very useful and powerfull component of bootstrap 4. 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

<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

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.

Home Mails Calls Text Messages

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Home</a>
  <a href="#" class="list-group-item list-group-item-action">Mails</a>
  <a href="#" class="list-group-item list-group-item-action">Calls</a>
  <a href="#" class="list-group-item list-group-item-action">Text Messages</a>
</div>

▶ Run the code

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

<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 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

<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.

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

<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

Points to remember:

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

❮ Prev Next ❯

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.