Tutorials Tonight's Logo

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

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

  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.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.