Bootstrap List Group

Bootstrap list group is basically an unordered list with list items.

Example

Learn HTML
Learn CSS
Learn Bootstrap

Steps: to create bootstrap 5 list group:

Add .list-group to the unordered list <ul> element base class.
Add list-item to the unordered list item <li> element base class.

General Syntax

      <ul class="list-group">
  <li class="list-group-item">List Item</li>
</ul>

Try it now

Source Code

          <div class="container mt-5">
 <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <ul class="list-group">
        <li class="list-group-item">First List item</li>
        <li class="list-group-item">Second List item</li>
        <li class="list-group-item">Third List item</li>
      </ul>
    </div> <!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note: To create a list group, you have to assign .list-group to the list group container while assign .list-group-item to the child element of list group container

List Group: Active Item

To display the active item of the list group, add .active to the list item having .list-group-item.

Example

Learn HTML
Learn CSS
Learn Bootstrap

General Syntax

      <ul class="list-group">
  <li class="list-group-item active">List Item</li>
</ul>

Try it now

Source Code

          <div class="container">
  <p class="text-center">Bootstrap List Group:Active Item</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <ul class="list-group">
        <li class="list-group-item active">Learn HTML</li>
        <li class="list-group-item">Learn CSS</li>
        <li class="list-group-item">Learn Bootstrap</li>
      </ul>
    </div><!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note: To create active list-item ,assign .active to the list-item base class.

List Group: Disabled Item

To make disabled list item, add .disabled to the list item having .list-group-item.

Example

HTML(Disabled)
CSS
Bootstrap

General Syntax

      <ul class="list-group">
  <li class="list-group-item disabled">List Item</li>
</ul>

Try it now

Source Code

          <div class="container">
  <p class="text-center">Bootstrap List Group:Disabled Item</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <ul class="list-group">
        <li class="list-group-item disabled">Learn HTML</li>
        <li class="list-group-item">Learn CSS</li>
        <li class="list-group-item">Learn Bootstrap</li>
      </ul>
    </div><!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note: In this example,.disabled is assigned to the list-item base class to create a disabled list item.

List Group: Linked Items

Steps to create bootstrap 5 actionable list item.

To create actionable list group items, use <div> in place of <ul> and <a> in place of <li>.
Assign .list-group to the <div> base class.
Assign .list-group-item to the <a> base class.
Assign .list-group-item to the <a> base class.
If you want to make grey background color on hover the list item then add .list-group-item-action to the element having list-group-item class.

Example

Web Design Graphics Design Web Hosting

General Syntax

      <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action"> List Item </a>
</div>

Try it now

Source Code

          <div class="container mt-5">
  <p class="text-center">List Group With Linked Items</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">Web Design</a>
        <a href="#" class="list-group-item list-group-item-action">Graphics Design</a>
        <a href="#" class="list-group-item list-group-item-action">Web Hosting</a>
      </div> <!--/list-group-->
    </div><!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note:In this example, an actionable list item has been created by applying above mentioned steps.

List Group: Active Linked Item

To create active actionable list item, use .active class to <a> element base class.it will remove the hover effect of an actionable list items.

Example

Web Design App Design Graphics Design

General Syntax

      <div class="list-group">
  <a href="#" class="list-group-item active">Active Link Item</a>
</div>

Try it now

Source Code

          <div class="container mt-5">
  <p class="text-center mt-4 mb-4">List Group With Active Linked Items</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <div class="list-group">
        <a href="#" class="list-group-item active">Web Design</a>
        <a href="#" class="list-group-item">App Design</a>
        <a href="#" class="list-group-item active">Graphics Design</a>
      </div><!--/list-group-->
    </div><!--/col-sm-6-->
  </div> <!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note: In this example, an active actionable list item has been created by assigning .active to the <a> element base class.

List Group: Disabled Linked Item

To create a disabled actionable list item, use the .disabled class to the <a> element base class.It will remove the hover effect on actionable list items.

Example

Web Design App Design Graphics Design

General Syntax

      <div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled Linked Item</a>
</div>

Try it now

Source Code

          <div class="container">
  <p class="text-center">List Group With Disabled Linked Items</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <div class="list-group">
        <a href="#" class="list-group-item disabled">Web Design</a>
        <a href="#" class="list-group-item">App Design</a>
        <a href="#" class="list-group-item disabled">Graphics Design</a>
      </div><!--/list-group-->
    </div><!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note: In this example, disabled actionable list item has been created by assigning .disabled to the <a> element base class.

Flush / Remove Borders

Apply the list-group-flush class to the <ul> element base class that removes some borders and rounded corners of the list items.

Source Code

          <div class="container mt-5">
  <p class="text-center">List Group Flush</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">First item</li>
        <li class="list-group-item">Second item</li>
        <li class="list-group-item">Third item</li>
        <li class="list-group-item">Fourth item</li>
      </ul>
    </div><!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note: Bootstrap list group flush is used to remove some corners and borders of the list items.

Horizontal List Group

To create a horizontal list group, add list-group-horizontal class to the <ul> element base class. A horizontal list can also be created with respect to device breakpoints. You have to use the list-group-horizontal-{sm|md|lg|xl} class to the <ul> element base class that makes a list group horizontal starting at those breakpoints min-width.

Use flex-fill class to every list item to make equal width of the horizontal list item.

General Syntax

      <ul class="list-group list-group-horizontal-{sm | md | lg | xl}"></ul>

Try it now

Source Code

          <div class="container mt-5">
  <p class="mb-4">Horizontal List Group At The Medium Device Breakpoint.</p>
  <ul class="list-group list-group-horizontal-md">
    <li class="list-group-item">Web Design</li>
    <li class="list-group-item">Web Development</li>
    <li class="list-group-item">Graphics Design</li>
  </ul>
  <p class="mt-5 mb-4">Horizontal List Group At The Small Device Breakpoint.</p>
  <ul class="list-group list-group-horizontal-sm">
    <li class="list-group-item">Learn HTML</li>
    <li class="list-group-item">Learn CSS</li>
    <li class="list-group-item">Learn Bootstrap</li>
  </ul>
</div>

Try it now

Code Explanation

Note:A horizontal list group is created by assigning either .list-group-horizontal or list-group-horizontal-{sm|md|lg|xl} class to the list group container (<ul>) element base class.

List Group: Contextual Classes

Bootstrap provides a contextual class that provides additional color as well as a background color to the list item.

Followings are the contextual classes that are very useful for coloring the list item. These are .list-group-item-success,.list-group-item-secondary ,.list-group-item-info,.list-group-item-warning,.list-group-item-danger , .list-group-item-dark and .list-group-item-light.

General Syntax

      <ul class="list-group">
  <li class="list-group-item list-group-item-{success | secondary | info | warning | danger | dark | light}">List Group</li>
</ul>

Try it now

Source Code

          <div class="container">
  <p class="text-center">List Group Contextual Classes</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <ul class="list-group">
        <li class="list-group-item">Tutorials</li>
        <li class="list-group-item list-group-item-primary">Web Design</li>
        <li class="list-group-item list-group-item-secondary">Graphics Design</li>
        <li class="list-group-item list-group-item-success">App Design</li>
      </ul>
    </div><!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note: To provide different background colors to the list group, use list group, contextual classes.

List Group: Link items with Contextual Classes

General Syntax

      <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action list-group-item-{success | secondary info ..}">Action item</a>
</div>

Try it now

Source Code

          <div class="container mt-5">
  <p class="text-center">List Group Link Item With Contextual Classes</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">Action item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
      </div>
    </div><!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Code Explanation

Note: Assign List group contextual class to the linked item base class to provide different background colors to the list item.

List Group With Badges

Combine .badge classes with utility/helper classes to add badges inside the list group. Adding .badge with additional helper classes to the badges inside list group, to create a list group with badges.

General Syntax

      <ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox <span class="badge bg-secondary badge-pill">85</span>
  </li>
</ul>

Try it now

Source Code

          <div class="container mt-5">
  <p class="text-center"> List Group With Badge</p>
  <div class="row">
    <div class="col-sm-6 offset-sm-3">
      <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Inbox
          <span class="badge bg-secondary badge-pill">85</span>
        </li>
      </ul>
    </div><!--/col-sm-6-->
  </div><!--/row-->
</div><!--/container-->

Try it now

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4