Bootstrap 4
BS List Group
Previous Page
Next Page

Bootstrap 4 List Groups

Bootstrap 4 list groups are basically an unordered list that consists of the list item.

Follow the following steps to create bootstrap 4 list groups.

  • Assign .list-group to the list group container(<ul>) element base class.
  • Assign .list-item to the every child element(<li>) of list group container(<ul>).

Example

  • First List Item
  • Second List Item
  • Third List Item

General Syntax 

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

Source Code 

          <div class="container mt-4">
  <h2>List Group</h2>
  <ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>
Try it now

Source Code: Output

List Group

  • First item
  • Second item
  • Third item

Note: In the above example .list-group is assigned to the list group container(<ul>) while .list-item is assigned to the list item(<li>).

Note:The list groups are used to display a list of items in an elegant way. List group item background color can be set by contextual classes of list group.

Active List Items

List group is basically is an ordered list in which .list-group is assigned to list group container while .list-item to the every child of list group container.To make active list item assign .active to the list item base class.

General Syntax 

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

Source Code 

          <div class="container mt-4">
  <h2>List Group</h2>
  <ul class="list-group">
    <li class="list-group-item active">Web Designing</li>
    <li class="list-group-item">Web Development</li>
    <li class="list-group-item">Graphics Design</li>
  </ul>
</div>
Try it now

Source Code: Output

List Group

  • Web Designing
  • Web Development
  • Graphics Design

Note: To make active list item ,assign .active to the list item(<li>) base class.

List Group Disabled Items

List group item will be disabled by assigning .disabled to the .list-group-item element.

General Syntax 

      <ul class="list-group">
  <li class="list-group-item disabled">List Item(Disabled)</li>
</ul>
Try it now

Source Code 

          <div class="container mt-4">
  <h2>Bootstrap List Group Disabled Item</h2>
  <ul class="list-group">
    <li class="list-group-item disabled" aria-disabled="true">App Development</li>
    <li class="list-group-item">Graphics Design</li>
    <li class="list-group-item">UX Design</li>
    <li class="list-group-item">CMS Development</li>
    <li class="list-group-item">Testing</li>
  </ul>
</div>
Try it now

Source Code: Output

Bootstrap List Group Disabled Item

  • App Development
  • Graphics Design
  • UX Design
  • CMS Development
  • Testing

Note: In the above example .disabled is used to assign list group item base class to disabled list item.

List Group With Linked Items

To create actionable list group ietms,use <div> in place of <ul> and <a> in place of <li>. Assign .list-group-item-action to <a> element base class.It creates grey background color during hover on the list item.

General Syntax 

      <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Learn Bootstrap</a>
</div>
Try it now

Source Code 

          <div class="container mt-4">
  <h2>Bootstrap List Group With Linked Items</h2>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action"> Learn HTML</a>
    <a href="#" class="list-group-item list-group-item-action"> learn CSS</a>
    <a href="#" class="list-group-item list-group-item-action">Learn Boottsrap</a>
  </div>
</div>
Try it now

Source Code: Output

Bootstrap List Group With Linked Items

Learn HTML learn CSS Learn Boottsrap

Note: To make actionable list group,assign .list-group to the <div> element and .list-group-item to the <a> element base class.To create hover effect on the list item assign .list-group-item-action to the <a> element base class.

Disabled Linked Item

To disable 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 disabled">Database Design</a>
</div>
Try it now

Source Code 

          <div class="container mt-4">
  <h2>Bootstrap Disabled Linked Item</h2>
  <div class="list-group">
    <a href="#" class="list-group-item disabled">Database Design</a>
    <a href="#" class="list-group-item disabled">Graphics Design</a>
    <a href="#" class="list-group-item">Web design</a>
  </div>
</div>
Try it now

Source Code: Output

Bootstrap Disabled Linked Item

Database Design Graphics Design Web design

Note: To make diabled actionable list item ,assign .disabled to the <a> element base class.

Flush / Remove Borders

Apply .list-group-flushto the <ul> 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">List item</li>
</ul>
Try it now

Source Code 

          <div class="container mt-4">
  <h2>Bootstrap Flush/Remove Borders</h2>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Web Development</li>
    <li class="list-group-item">Database Decelopment</li>
    <li class="list-group-item">Graphics Development</li>
    <li class="list-group-item">Testing</li>
  </ul>
</div>
Try it now

Source Code: Output

Bootstrap Flush/Remove Borders

  • Web Development
  • Database Decelopment
  • Graphics Development
  • Testing

Note: To remove list group borders and rounded corners ,assign .list-group-flush to the <ul> element base class.

Horizontal List Group

To create horizontal list group ,add .list-group-horizontal to the <ul> 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 

      <h4 class="text-muted">Basic List Group</h4>
<ul class="list-group">
  <li class="list-group-item">Learn HTML</li>
</ul>
<h4 class="text-muted">Horizontal list Group At The Breaking Point Of Large Device</h4>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Learn HTML</li>
</ul>
Try it now

Source Code 

          <div class="container mt-4">
  <h2>Normal list Group</h2>
  <ul class="list-group">
    <li class="list-group-item">Lean HTML</li>
    <li class="list-group-item">Lean CSS</li>
    <li class="list-group-item">Learn Bootstrap</li>
  </ul>
  <h2 class="text-muted mt-2 mb-2">Horizontal list Group At The Breaking Point:lg</h2>
  <ul class="list-group list-group-horizontal-lg">
    <li class="list-group-item">Leatn HTML</li>
    <li class="list-group-item">LeARN CSS</li>
    <li class="list-group-item">Learn CSS</li>
  </ul>
</div>
Try it now

Source Code: Output

Normal list Group

  • Lean HTML
  • Lean CSS
  • Learn Bootstrap

Horizontal list Group At The Breaking Point:lg

  • Leatn HTML
  • LeARN CSS
  • Learn CSS

Note: Horizontal list group can be created very easily by adding .list-group-horizontal to the <ul> element 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 list-group-item-*">List group item</li>
</ul>
Try it now

Source Code 

          <div class="container mt-4">
  <h2>Bootstrap Contextual Classes</h2>
  <ul class="list-group">
    <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>
  </ul>
</div>
Try it now

Source Code: Output

Bootstrap Contextual Classes

  • Primary list group item
  • secondary list group item
  • Success list group item

Note: In the abovce example,list group contextual classes are used to provide color & background color to the list item.

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-*">List item</a>
</div>
Try it now

Source Code 

          <div class="container mt-4">
  <h2 class="text-center">Bootstrap List Group Link items with Contextual Classes</h2>
  <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>
  </div>
</div>
Try it now

Source Code: Output

Bootstrap List Group Link items with Contextual Classes

Action item Success item Secondary item

Note: To provide different colors and background colors to the linked item in the list group, assign .list-group-item-* to the hyperlink element base class.

Bootstrap 4 List Group with Badges

To create bootstrap 4 list group with badge, 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, creates List group with badges.

General Syntax 

      <ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Message
    <span class="badge badge-success badge-pill">50</span>
  </li>
</ul>
Try it now

Source Code 

          <div class="container mt-4">
  <b>Bootstrap List Group With Badge</b>
  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Message <span class="badge badge-success badge-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Event <span class="badge badge-info badge-pill">80</span>
    </li>
  </ul>
</div>
Try it now

Source Code: Output

Bootstrap List Group With Badge
  • Message 50
  • Event 80

Note: In the above example badge and list group both are used to make most useful list group item.

Online Test / Quiz

Question set 1

Web Tutorials

Bootstrap 4 List Group
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Tutorials
HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution
HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach
Coaching Software Computer Software Skill Management Software School Management Software