BootstrapHow-ToBeginner · 3 min read

How to Create List Group in Bootstrap: Simple Guide

To create a list group in Bootstrap, use a <ul> or <div> with the class list-group. Inside it, add items with the class list-group-item to style each list entry automatically.

📐

Syntax

Use a container element with the class list-group to hold the list items. Each item inside should have the class list-group-item to get Bootstrap's default styling.

<ul class="list-group"> or <div class="list-group">: The list container.
<li class="list-group-item"> or <a class="list-group-item">: Each list item styled by Bootstrap.

html

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

Output

A vertical list with three items, each styled with padding, border, and hover effect.

💻

Example

This example shows a simple vertical list group with three items using Bootstrap classes. It demonstrates how easy it is to get a clean, styled list without extra CSS.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap List Group Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <ul class="list-group">
      <li class="list-group-item">Home</li>
      <li class="list-group-item">Profile</li>
      <li class="list-group-item">Messages</li>
    </ul>
  </div>
</body>
</html>

Output

A clean vertical list with three items labeled Home, Profile, and Messages, each with Bootstrap's default list group styling.

⚠️

Common Pitfalls

Common mistakes include forgetting the list-group class on the container or missing list-group-item on the items, which results in no styling. Also, mixing <li> inside a <div> without proper structure can cause invalid HTML.

html

<!-- Wrong: Missing list-group class -->
<ul>
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
</ul>

<!-- Right: Add list-group class to container -->
<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
</ul>

Output

The first list shows plain bullet points without Bootstrap styling; the second list shows styled list group items.

📊

Quick Reference

Remember these key classes for Bootstrap list groups:

Class	Purpose
list-group	Container for the list group items
list-group-item	Styles each item inside the list group
list-group-item-action	Makes list items clickable with hover effect
active	Highlights an item as active
disabled	Disables an item visually and functionally

✅

Key Takeaways

Use list-group on the container and list-group-item on each item for Bootstrap styling.

List groups can be built with <ul>, <div>, or <a> elements.

Add list-group-item-action to make items interactive and clickable.

Always include Bootstrap CSS for styles to apply.

Avoid missing classes or invalid HTML structure to ensure proper rendering.