Master Bootstrap List Groups ⚡ Beginner to Pro | Star Wars Battlefront Bootstrap List Groups

 

 Module 41 : Bootstrap List Groups.

1. Introduction 

 What is a List Group?

A List Group is a flexible Bootstrap component used to display:

• Menus

• Notifications

• Task lists

• Navigation panels

• Data summaries

Think of it as a clean structured list with design + interaction support.

 Why Use List Groups?

✔ Ready-made styling

✔ Responsive

✔ Works with links & buttons

✔ Supports badges, icons, active states

 2. Basic List Group Structure

✅ Syntax:

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

Explanation:

Class

Purpose

list-group

Container

list-group-item

Each item

Bootstrap automatically adds:

• Borders

• Padding

• Hover effects

3. Active & Disabled Items

<ul class="list-group"> <li class="list-group-item active">Dashboard</li> <li class="list-group-item">Settings</li> <li class="list-group-item disabled">Logout</li> </ul>

Concepts:

• .active → highlighted selection

• .disabled → non-clickable item

Used in:

✔ Sidebars

✔ Navigation menus

 4. List Groups with Links & Buttons

 Clickable List:

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Profile</a> <a href="#" class="list-group-item list-group-item-action">Orders</a> </div>

Why use this?

Creates:

✔ Mobile-friendly menus

✔ Interactive dashboards

 5. Contextual Colors

<ul class="list-group"> <li class="list-group-item list-group-item-success">Success</li> <li class="list-group-item list-group-item-danger">Error</li> <li class="list-group-item list-group-item-warning">Warning</li> </ul>

 

Class

Meaning

success

positive

danger

error

warning

alert

info

information

Great for:

📊 Status dashboards

📋 Reports

6. List Groups with Badges (Counters)

<ul class="list-group"> <li class="list-group-item d-flex justify-content-between"> Messages <span class="badge bg-primary rounded-pill">12</span> </li> </ul>

 Use cases:

• Notification counts

• Cart items

• Pending tasks

 7. Advanced Content Inside List Groups

<div class="list-group"> <div class="list-group-item"> <h5>Order #1023</h5> <p>Status: Shipped</p> <small>Updated 2 hours ago</small> </div> </div>

Key Idea:

List groups can hold:

✔ Text

✔ Headings

✔ Images

✔ Buttons

Build a User Dashboard Menu

 Objective:

Create a sidebar menu using List Groups

Step 1: Include Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

 Step 2: Create Sidebar

<div class="container mt-4"> <div class="col-md-4"> <div class="list-group"> <a class="list-group-item list-group-item-action active">Dashboard</a> <a class="list-group-item list-group-item-action">Orders</a> <a class="list-group-item list-group-item-action">Profile</a> <a class="list-group-item list-group-item-action">Settings</a> </div> </div> </div>

 Result:

A professional responsive sidebar menu.

EXERCISES

Exercise 1:

Create a to-do list using list groups with:

✔ Completed (green)

✔ Pending (yellow)

Exercise 2:

Build a notification panel with:

✔ Message title

✔ Time

✔ Badge counter

Exercise 3:

Create a clickable navigation menu using anchors.

 RESEARCH 

 Topics to Explore:

               

Combine List Groups with JavaScript for dynamic updates

Use List Groups inside Cards

AJAX-loaded list items

Accessibility (ARIA roles)

Custom styling using CSS variables

Sample Dynamic List (JS Controlled)

<ul id="taskList" class="list-group"></ul> <script> let tasks = ["Learn Bootstrap", "Build Project", "Submit Assignment"]; tasks.forEach(task => { let li = document.createElement("li"); li.className = "list-group-item"; li.innerText = task; document.getElementById("taskList").appendChild(li); }); </script>

Applications

✅ Admin panels

                   

✅ E-commerce dashboards

✅ Mobile menus

✅ Notification systems

✅ Task managers