Bootstrap List Groups

Learn via video courses
Topics Covered

Bootstrap's .list-group class creates versatile responsive list groups for simple or complex content, enhancing UI design without starting from scratch.

Basic Example of Bootstrap List Groups

An unordered list with list items and the appropriate classes is the simplest type of list group. Add to it using the options that are provided below or your CSS as necessary.

Following is an illustration of a basic list group.

Code :

Output :

basic-example-of-bootstrap-list-groups

Active Items

To show the currently active selection, append the class .active to a .list-group-item.To prevent the text from overlapping the edge of the list, you can additionally add extra padding with spacing classes. You should also use .border-0 to eliminate borders between items.

Code :

Output :

active-items

Disabled Items

To make a .list-group-item appear disabled, append the class .disabled to it. To completely deactivate the click events of particular items with the .disabled class, special JavaScript is necessary (e.g., links).

Code :

Output :

disabled-items

Add .list-group-item-action to using <a> or <button> to build actionable list group items with disabled, hover, and active states. We divide these pseudo-classes between making sure list groups built of non-interactive components (like <div> or <li>) don't offer a click-or-tap affordance.

Be sure to avoid applying the standard .btn classes.

Instead of using the .disabled class with <button>, you can use the disabled attribute. Sadly, the disabled attribute is not supported by <a>.

Code :

Output :

links-and-buttons

Flush

To display list group items edge-to-edge in a parent container, add .list-group-flush to remove some borders and rounded corners (e.g., cards).

Code :

Output :

flush

Numbered

To enable numbered list group elements, add the .list-group-numbered modifier class (and optionally utilize an <ol> element). For better placement inside list group items and to enable better customization, numbers are generated using CSS (as opposed to default browser styling).

a::before pseudo-element on the <li> with counter-increment and content is used to style and position numbers after being generated by counter-reset on the <ol>.

Horizontal

To alter the list group item layout from vertical to horizontal across all breakpoints, add .list-group-horizontal. To create a list group horizontal beginning at that breakpoint's min-width, select a responsive variation .list-group-horizontal-{sm|md|lg|xl|xxl}. At the moment, flush or light list groups cannot be mixed with horizontal list groups.

ProTip :
Do you like equal-width list groups for horizontal lists ? Use .flex-fill with each list group.

Contextual Classes

Contextual classes are used by Bootstrap for list group elements. It will give the items a variety of colors.

  • .list-group-item-primary :
    Add this class to impart blue color to a list item.
  • .list-group-item-secondary :
    Add this class to impart grey color to a list item.
  • .list-group-item-success :
    Add this class to impart green color to a list item.
  • .list-group-item-danger :
    Add this class to impart red color to a list item.
  • .list-group-item-warning :
    Add this class to impart orange color to a list item.
  • .list-group-item-info :
    Add this class to impart a light blue color to a list item.
  • .list-group-item-light :
    Add this class to impart a light grey color to a list item.
  • .list-group-item-dark :
    Add this class to impart a dark grey color to a list item.

contextual-classes

Important :
Using color-coding to add meaning just gives a visual cue, which users of assistive technologies like screen readers won't be able to understand. Make sure the information the color designates is either evident from the content itself (such as the visible text) or is included in another way, such as by hiding additional text using the .visually-hidden class.

Badges

Using simple flexbox utilities, you can add badges to any list group item to display unread counts, activity, and other information.

Code :

Output :

badges

Custom Content

With the use of flexbox utilities, almost any HTML may be included therein, even for linked list groups like the one below.

Code :

Output :

custom-content

Javascript Behaviour

To add tabbable panes of local content to our list group, use the tab JavaScript plugin.

Code :

Output :

javascript-behaviour

Fade Effect

Add .fade to each .tab-pane to have the tabs panel fade in. For the original content to be displayed, the first tab pane also has to have .show.

Methods :

$().tab

It activates a content container and lists item elements. Either a data-target or a href targeting a container node in the DOM should be present in Tab.

Code :

Output :

fade-effect

.tab(‘show’

Selects the specified list item and display the related pane. Previously selected list items become unselected, and the associated window is hidden. returns to the caller before the tab window appears (for example, before the shown.bs.tab event occurs).

Code :

Events

The following events take place when a new tab is displayed :

  • hide.bs.tab :
    on the current active tab.
  • show.bs.tab :
    on the to-be-shown tab.
  • hidden.bs.tab :
    on the previous active tab.
  • shown.bs.tab :
    on the newly-active just-shown tab.

The hide.bs.tab and hidden.bs.tab events won't be called if there were no active tabs.

Description of the following events are given below :

  • hide.bs.tab :
    This event occurs when a tab is shown, but before the next tab appears. To target the active tab and the preceding active tab (if available), use event.target and event.relatedTarget, respectively.

  • show.bs.tab :
    After a tab has been presented, this event occurs on the tab shown. To target the active tab and the preceding active tab (if available), use event.target and event.relatedTarget, respectively.

  • hidden.bs.tab :
    This occurs when a new tab is about to be displayed (and thus the previous active tab is to be hidden). To target the currently active tab and the new tab that will soon become active, use event.target and event.relatedTarget, respectively.

  • shown.bs.tab :
    This occurs after the appearance of a new tab (and thus the previous active tab is hidden). To target the previous active tab and the new active tab, use event.target and event.relatedTarget, respectively.

Conclusion

  • List groups are a flexible and effective component for showing a series of content.
  • List groups are styled using a variety of classes in Bootstrap.
  • We can make various lists, including ones with actionable list items, horizontal groups, groups with badges, etc.
  • Bootstrap classes required to create list groups are .list-group and .list-group-item.
  • For styling the list items, various contextual classes are used.
  • Using Bootstrap List Groups have a lot of advantages like the overall structure of the page and user-friendly look.
  • There is no harm in using them, so it is quite good to use them.