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

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

Example

First item
Second item
Third item

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.

Example

General Syntax

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

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <ul class="list-group">
        <li class="list-group-item">Web design</li>
        <li class="list-group-item">Graphics Design</li>
        <li class="list-group-item">Mobile Development</li>
      </ul>
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Web design
Graphics Design
Mobile Development

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

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 HTML</a>
</div>

Try It Now

Source Code

	
		<div class="container text-center">
  <div class="row">
    <div class="col-12">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action"> HTML Tutorial</a>
        <a href="#" class="list-group-item list-group-item-action"> CSS Tutorial</a>
        <a href="#" class="list-group-item list-group-item-action">
          Bootstrap Tutorial
        </a>
      </div>
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

HTML Tutorial CSS Tutorial Bootstrap Tutorial

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.

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">Web Designing</li>
</ul>

Source Code

	
		<div class="container my-2">
  <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>
    <li class="list-group-item">Database Design</li>
    <li class="list-group-item">Testing</li>
  </ul>
</div>

Try it yourself

Source Code : Output

Web Designing
Web Development
Graphics Design
Database Design
Testing

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">App Development</li>
</ul>

Try It Now

Source Code

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

Source Code : Output

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.

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>

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <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>
  </div>
</div>

Try it yourself

Source Code : Output

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"> </ul>

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <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>
  </div>
</div>

Try it yourself

Source Code : Output

First item
Second item
Third item
Fourth item

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

		<ul class="list-group list-group-horizontal-lg"></ul>

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <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>
        </div>
      </div>
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

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-primary">Primary list group item</li>
</ul>

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <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>
              <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>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

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

Note: In the above 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>
</div>

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12">
      <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>
        <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
      </div>
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Action item Success item Secondary item Info item Warning item Danger item Primary item Dark item Light 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.

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

	
		<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>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Upcoming Event <span class="badge badge-warning badge-pill">109</span>
  </li>
</ul>

Try it yourself

Source Code : Output

Message 50
Event 80
Upcoming Event 109

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

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS