0
0
Bootsrapmarkup~15 mins

List styles (unstyled, inline) in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Styling Lists with Bootstrap: Unstyled and Inline
📖 Scenario: You are creating a simple webpage that shows two types of lists using Bootstrap styles. One list should have no default bullet points or numbers, and the other list should display its items side by side horizontally.
🎯 Goal: Build a webpage with two lists: one unstyled list without bullets and one inline list with items displayed horizontally using Bootstrap classes.
📋 What You'll Learn
Use Bootstrap 5 classes to style lists
Create an unstyled list using the list-unstyled class
Create an inline list using the list-unstyled d-flex classes
Each list should have exactly three items with the texts: Home, About, and Contact
Use semantic HTML elements and include necessary Bootstrap CSS link
💡 Why This Matters
🌍 Real World
Lists are common in websites for menus, features, or information. Styling them properly improves user experience and design.
💼 Career
Knowing how to use Bootstrap classes to style lists is a valuable skill for front-end web developers working on responsive and clean UI designs.
Progress0 / 4 steps
1
Create the basic HTML structure with two lists
Write the basic HTML5 skeleton including <!DOCTYPE html>, <html lang="en">, <head> with charset UTF-8, viewport meta tag, and a <body>. Inside the body, create two unordered lists: one with the id unstyled-list and one with the id inline-list. Each list should have three list items with the exact texts: Home, About, and Contact.
Bootsrap
Need a hint?

Start by writing the full HTML page structure. Then add two unordered lists with the exact ids and list items as described.

2
Add Bootstrap CSS link in the head
Add the Bootstrap 5 CSS CDN link inside the <head> section. Use the official Bootstrap 5.3.0 CDN link: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
Bootsrap
Need a hint?

Paste the Bootstrap CSS link exactly inside the head section before closing it.

3
Make the first list unstyled using Bootstrap
Add the Bootstrap class list-unstyled to the unordered list with the id unstyled-list to remove bullet points.
Bootsrap
Need a hint?

Add the class list-unstyled inside the opening <ul> tag with id unstyled-list.

4
Make the second list inline using Bootstrap
Add the Bootstrap classes list-unstyled and d-flex to the unordered list with the id inline-list to remove bullet points and display the items horizontally. No additional classes are needed on the individual <li> elements.
Bootsrap
Need a hint?

Remember to add list-unstyled d-flex to the <ul> with id inline-list. No classes needed on the <li> elements.