Bootstrap 4 List Groups


Basic List Groups

If more than one list is put together, it is called a list-group. Bootstrap has a .list-group class by which more than one list can be sorted together. To use it, follow the procedure below-

  1. You must first add a .list-group class inside the <ul> tag.
  2. Then add a .list-group-item class inside each <li> tag.
  3. If you want to use the <a> tag, you need to add a .list-group-item-action class.

Example code

<ul class="list-group">
<li class="list-group-item">India</li>
<li class="list-group-item">Bangladesh</li>
<li class="list-group-item">Pakistan</li>
</ul>

Active State

In many of the lists, the current list is highlighted with the .active class.

Example code

<ul class="list-group">
<li class="list-group-item active">India</li>
<li class="list-group-item">Bangladesh</li>
<li class="list-group-item">Pakistan</li>
</ul>

Disable State

The .disabled class must be used to specifically un-clickable any one of many lists.

Example code

<ul class="list-group">
<li class="list-group-item">India</li>
<li class="list-group-item">Bangladesh</li>
<li class="list-group-item disabled">Pakistan</li>
</ul>

List Groups with Linked Items

If you want to create a list-group with linked items, follow the steps below:

  1. All you have to do is create a <div> and add a .list-group class.
  2. Then create <a> and add the .list-group-item class inside it.
  3. If you want the user's mouse to hover over the list, you need to add a .list-group-action class if you want a gray background.
India Pakistan Bangladesh

Example code

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">India</a>
<a href="#" class="list-group-item list-group-item-action">Pakistan</a>
<a href="#" class="list-group-item list-group-item-action">Bangladesh</a>
</div>

Remove Border of List Groups

To remove borders from list groups, use the .list-group-flush class.

India Pakistan Bangladesh

Example code

<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">India</a>
<a href="#" class="list-group-item list-group-item-action">Pakistan</a>
<a href="#" class="list-group-item list-group-item-action">Bangladesh</a>
</div>

Context Classes

List-groups have many contextual classes for changing background colors and font colors. They are .list-group-item-primary, .list-group-item-secondary, .list-group-item-info, .list-group-item-success, .list-group-item-warning, .list- group-item-danger, .list-group-item-dark, .list-group-item-light classes.

Example code

<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary</li>
<li class="list-group-item list-group-item-secondary">Secondary</li>
<li class="list-group-item list-group-item-info">Info</li>
<li class="list-group-item list-group-item-success">Success</li>
<li class="list-group-item list-group-item-warning">Warning</li>
<li class="list-group-item list-group-item-danger">Danger</li>
<li class="list-group-item list-group-item-dark">Dark</li>
<li class="list-group-item list-group-item-light">Light</li>
</ul>

Context Classes With Linked Items

List-groups linked items have many contextual classes for changing background colors and font colors. They are .list-group-item-primary, .list-group-item-secondary, .list-group-item-info, .list-group-item-success, .list-group-item-warning, .list- group-item-danger, .list-group-item-dark, .list-group-item-light classes.

Primary Secondary Info Success Warning Danger Dark Light

Example code

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary</a>
<a href="#" class="list-group-item list-group-item-secondary list-group-item-action">Secondary</a>
<a href="#" class="list-group-item list-group-item-info list-group-item-action">Info</a>
<a href="#" class="list-group-item list-group-item-success list-group-item-action">Success</a>
<a href="#" class="list-group-item list-group-item-warning list-group-item-action">Warning</a>
<a href="#" class="list-group-item list-group-item-danger list-group-item-action">Danger</a>
<a href="#" class="list-group-item list-group-item-dark list-group-item-action">Dark</a>
<a href="#" class="list-group-item list-group-item-light list-group-item-action">Light</a>
</div>

List Groups with Badges

The .badge class can be placed within the .list-group-item of the list group.

Primary 3 Secondary 4 Secondary 5

Example code

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary d-flex justify-content-between align-items-center">Primary
<span class="badge badge-primary">3</span>
</a>
<a href="#" class="list-group-item list-group-item-secondary list-group-item-action  d-flex justify-content-between align-items-center">Secondary
<span class="badge badge-primary">4</span>
</a>
<a href="#" class="list-group-item list-group-item-info list-group-item-action  d-flex justify-content-between align-items-center">Secondary
<span class="badge badge-primary">5</span>
</a>
</div>