Bootsrapmarkup~30 mins

List group component in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Bootstrap List Group Component

📖 Scenario: You are building a simple webpage to display a list of tasks using Bootstrap's list group component. This will help users see their tasks clearly and in a styled manner.

🎯 Goal: Create a Bootstrap list group with exactly four list items showing the tasks: 'Buy groceries', 'Call mom', 'Finish homework', and 'Read a book'.

📋 What You'll Learn

Use Bootstrap 5 classes for the list group

Create an unordered list with the class list-group

Add four list items with the class list-group-item

Each list item must contain the exact text for the tasks given

Include the basic HTML5 document structure with lang, charset, and viewport meta tags

💡 Why This Matters

🌍 Real World

List groups are commonly used in websites and apps to show lists of items like tasks, messages, or notifications in a clean and organized way.

💼 Career

Knowing how to use Bootstrap components like list groups helps you quickly build professional-looking user interfaces that are responsive and accessible.

Progress0 / 4 steps

Create the HTML skeleton

Write the basic HTML5 document structure with lang="en", charset="UTF-8", and the viewport meta tag for responsive design.

Bootsrap

Need a hint?

Remember to include <!DOCTYPE html> at the top and set the language to English.

Add Bootstrap CSS link

Inside the <head> section, add the Bootstrap 5 CSS CDN link to enable Bootstrap styles.

Bootsrap




    
    
    Task List

Need a hint?

Use the official Bootstrap 5 CDN link for CSS inside the <head> tag.

Create the list group with tasks

Inside the <body>, create an unordered list with the class list-group. Add four list items with the class list-group-item containing the exact texts: Buy groceries, Call mom, Finish homework, and Read a book.

Bootsrap




    
    
    Task List

Need a hint?

Use <ul> with class list-group and inside it add four <li> elements with class list-group-item.

Add accessibility and container

Wrap the list group inside a <main> element with role="main" for accessibility. Also, add a Bootstrap container <div class="container mt-4"> around the <main> to center content with margin top spacing.

Bootsrap




    
    
    Task List

Need a hint?

Use a <div> with classes container mt-4 and inside it a <main> with role="main" wrapping the list.