Bootstrap List Groups

Bootstrap list groups are basically an unordered list with list items.

Bootstrap 5 Basic List Group

Steps: to create list group:

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

General Syntax

      <ul class="list-group">
  <li class="list-group-item">List Group item</li>
</ul>
    
Try It Now

Source Code

    <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>
  
Try it yourself

Source Code : Output

  • First List item
  • Second List item
  • Third List item

Note:To create list-group ,assign .list-group to the list-group container base class and also assign .list-item to the list-item base class.

Active State Of List Group

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

General Syntax

      <ul class="list-group">
  <li class="list-group-item active">Learn Bootstrap5</li>
  <li class="list-group-item">Learn CSS3</li>
</ul>
    
Try It Now

Source Code

    <ul class="list-group">
  <li class="list-group-item active">Learn App Development</li>
  <li class="list-group-item">Learn Graphics Design</li>
  <li class="list-group-item">Learn Software Development</li>
</ul>
  
Try it yourself

Source Code : Output

  • Learn App Development
  • Learn Graphics Design
  • Learn Software Development

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.

General Syntax

      <ul class="list-group">
  <li class="list-group-item disabled">Learn Graphics Designing</li>
  <li class="list-group-item">Learn Logo Design</li>
  <li class="list-group-item">Learn App Design</li>
</ul>
    
Try It Now

Source Code

    <ul class="list-group">
  <li class="list-group-item disabled">Play With CSS</li>
  <li class="list-group-item">CSS3 Animation</li>
  <li class="list-group-item">Learn CSS Framework</li>
</ul>
  
Try it yourself

Source Code : Output

  • Play With CSS
  • CSS3 Animation
  • Learn CSS Framework

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

List Group With Linked Items

Steps to create actionable list item.

  • Step1:To create actionable list group items,use <div> inplace of <ul> and <a> inplace of <li>.
  • Step2:Assign .list-group to the <div> base class.
  • Step3:Assign .list-group-item to the <a> base class.
  • Step4:Assign .list-group-item to the <a> base class.
  • Step5: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.

General Syntax

      <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>
    
Try It Now

Source Code

    <div class="container">
  <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 yourself

Source Code : Output

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

Active Linked Item

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

General Syntax

      <div class="list-group">
  <a href="#" class="list-group-item active">Web Design</a>
  <a href="#" class="list-group-item active">App Design</a>
  <a href="#" class="list-group-item">Graphics Design</a>
</div>
    
Try It Now

Source Code

    <div class="list-group">
  <a href="#" class="list-group-item active">Prototype Design</a>
  <a href="#" class="list-group-item">Logo Design</a>
  <a href="#" class="list-group-item active">Icon Design</a>
</div>
<!--/list-group-->
  
Try it yourself

Source Code : Output

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

Disabled Linked Item

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

General Syntax

      <div class="list-group">
  <a href="#" class="list-group-item active">Prototype Design</a>
  <a href="#" class="list-group-item">Logo Design</a>
  <a href="#" class="list-group-item active">Icon Design</a>
</div>
<!--/list-group-->
    
Try It Now

Source Code

    <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-->
  
Try it yourself

Source Code : Output

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

Flush / Remove Borders

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

General Syntax

      <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>
    
Try It Now

Source Code

    <ul class="list-group list-group-flush">
  <li class="list-group-item">Learn PHP</li>
  <li class="list-group-item">Learn JSP</li>
  <li class="list-group-item">Learn Ruby</li>
</ul>
  
Try it yourself

Source Code : Output

  • Learn PHP
  • Learn JSP
  • Learn Ruby

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

Horizontal List Group

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

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

General Syntax

      <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>
    
Try It Now

Source Code

    <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>
  
Try it yourself

Source Code : Output

  • Web Design
  • Web Development
  • Graphics Design

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

Contextual Classes

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

Followings are the contextual classes that is very useful for coloring 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">Tutorials</li>
  <li class="list-group-item list-group-item-primary">HTML Tutorial</li>
  <li class="list-group-item list-group-item-secondary">CSS Tutorial</li>
  <li class="list-group-item list-group-item-success">Bootstrap Tutorial</li>
</ul>
    
Try It Now

Source Code

    <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>
  
Try it yourself

Source Code : Output

  • Tutorials
  • Web Design
  • Graphics Design
  • App Design

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

Link items with Contextual Classes

General Syntax

      <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>
</div>
    
Try It Now

Source Code

    <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Learn Adobe Photoshop</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Learn Adobe Illustrator CC</a>
</div>
  
Try it yourself

Source Code : Output

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 creates 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 badge-primary badge-pill">18</span>
    </li>
</ul>
    
Try It Now

Source Code

    <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>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <span class="badge bg-info badge-pill">88</span>
  </li>
</ul>
  
Try it yourself

Source Code : Output

  • Inbox 85
  • Messages 88
Online Test / Quiz
Web Tutorials
Bootstrap List Groups
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS