1. Bootstrap 4
  2. BS List Group
Bootstrap 4 List Group

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Our Tutorials


Bootstrap 4

Bootstrap 5

Bootstrap 4 & 5

Quiz/Online Test

HTML Tutorial

CSS Tutorial
Tutorials HTML CSS Bootstrap 4 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