• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 List Groups

← Previous Next →

List groups are a versatile Bootstrap 4 component used to display a series of content items in a clean and organized way. They are ideal for menus, notifications, user lists, and any content that requires consistent styling and alignment. List groups are highly customizable, responsive, and can be enhanced with badges, links, and contextual classes. This tutorial will cover everything you need to know about BS4 list groups.

What Are List Groups?

A list group is a collection of elements displayed vertically with uniform styling. Bootstrap 4 provides the .list-group class for the container and .list-group-item for individual items. List groups can contain simple text, links, buttons, or even complex content with headings and badges.

Basic List Group

The simplest list group uses a <ul> or <div> with the .list-group class, and each item uses .list-group-item.

<ul class="list-group">
  <li class="list-group-item">Catherine</li>
  <li class="list-group-item">Priya</li>
  <li class="list-group-item">Anika</li>
</ul>

Each item is displayed in a clean, uniform box with subtle borders and padding.

Active and Disabled Items

Bootstrap allows highlighting an active item or disabling items that are not clickable.

<ul class="list-group">
  <li class="list-group-item active">Active Item</li>
  <li class="list-group-item">Normal Item</li>
  <li class="list-group-item disabled">Disabled Item</li>
</ul>

  • .active indicates the current selection.

  • .disabled visually disables an item and prevents interaction.

List Group as Links

List group items can also be made clickable by using <a> elements with .list-group-item and .list-group-item-action. This turns each item into a button-like element.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Catherine</a>
  <a href="#" class="list-group-item list-group-item-action">Priya</a>
  <a href="#" class="list-group-item list-group-item-action">Anika</a>
</div>

Clickable items provide better user interaction for menus, navigation, or item selection.

Contextual Classes

List groups support contextual colors similar to buttons. Use classes like .list-group-item-primary, .list-group-item-success, .list-group-item-danger, and others to indicate different statuses or categories.

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary Item</li>
  <li class="list-group-item list-group-item-success">Success Item</li>
  <li class="list-group-item list-group-item-danger">Danger Item</li>
</ul>

This enhances clarity and provides visual cues to users.

List Group with Badges

Badges can be used inside list group items to show counts, statuses, or labels. Place a badge inside the item and use .badge with .float-right for alignment.

<ul class="list-group">
  <li class="list-group-item">
    Messages <span class="badge badge-primary float-right">4</span>
  </li>
  <li class="list-group-item">
    Notifications <span class="badge badge-success float-right">2</span>
  </li>
</ul>

Badges provide extra information without cluttering the list.

Horizontal List Groups

Bootstrap 4 allows horizontal list groups by adding .list-group-horizontal. These display items inline rather than vertically. You can adjust the layout for different screen sizes with responsive classes like .list-group-horizontal-sm or .list-group-horizontal-md.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Catherine</li>
  <li class="list-group-item">Priya</li>
  <li class="list-group-item">Anika</li>
</ul>

Horizontal lists are useful for navigation menus or tags.

Custom Content

List group items can contain more than simple text. You can include headings, paragraphs, small text, and other HTML elements.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Catherine</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">This is a detailed description for Catherine.</p>
    <small>Additional info here.</small>
  </a>
</div>

This is useful for notifications, messages, or complex list displays.

List Group with Buttons

You can also use buttons as list group items with .list-group-item-action for interactive elements.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action">Option 1</button>
  <button type="button" class="list-group-item list-group-item-action">Option 2</button>
  <button type="button" class="list-group-item list-group-item-action">Option 3</button>
</div>

Buttons provide better accessibility and keyboard navigation.

Best Practices

  1. Keep list items concise and consistent.

  2. Use contextual classes and badges for clarity.

  3. Use horizontal layout for compact menus or tag lists.

  4. Use clickable items only when action is required.

  5. Ensure accessibility by using proper semantic elements.

Practical Examples

  • Navigation Menu: A vertical or horizontal list of links.

  • Notifications: Messages or alerts with badges showing counts.

  • User List: Display user names with additional info like last login.

  • Options Selection: Clickable items for settings or choices.

  • Tags or Categories: Horizontal list groups for filtering content.

Summary of the Tutorial

Bootstrap 4 list groups are highly flexible and versatile components for organizing content. They can be simple text lists, clickable links, buttons, or complex content with headings and badges. Using list groups effectively improves readability, user interaction, and overall UI design. They are ideal for menus, notifications, user lists, and many other interface elements.

Practice Questions

  1. Create a basic vertical list group with three items: Catherine, Priya, and Anika.

  2. Create a list group where the second item is active and the third item is disabled.

  3. Create a clickable list group with <a> tags for each item using .list-group-item-action.

  4. Create a list group with contextual classes: one item .list-group-item-primary, one .list-group-item-success, and one .list-group-item-danger.

  5. Create a list group with badges on each item showing counts: 4, 2, and 1.

  6. Create a horizontal list group using .list-group-horizontal with three items.

  7. Create a responsive horizontal list group that changes layout for small screens using .list-group-horizontal-sm.

  8. Create a list group with custom content: include a heading, a paragraph, and a small timestamp for each item.

  9. Create a list group with buttons as items using <button> and .list-group-item-action.

  10. Create a list group combining badges and buttons, e.g., a list of tasks where each task has a badge indicating priority and is clickable.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top