Bird
Raised Fist0
Bootsrapmarkup~15 mins

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

Choose your learning style10 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
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
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
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
Hint

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

Practice

(1/5)
1. What does the Bootstrap class list-unstyled do to a list?
easy
A. Adds numbers before each list item
B. Displays list items horizontally
C. Removes bullets and indentation from the list
D. Changes the font color of list items

Solution

  1. Step 1: Understand the purpose of list-unstyled

    This class removes the default bullet points and indentation from vertical lists, making them plain.

  2. Step 2: Compare with other list styles

    Unlike list-inline, which arranges items horizontally, list-unstyled keeps items vertical but without bullets.

  3. Final Answer:

    Removes bullets and indentation from the list -> Option C

  4. Quick Check:

    list-unstyled = no bullets [OK]
Hint: Unstyled means no bullets or indentation [OK]
Common Mistakes:
  • Confusing list-unstyled with horizontal layout
  • Thinking it adds numbers instead of removing bullets
  • Assuming it changes colors or fonts
2. Which is the correct way to create a horizontal list using Bootstrap classes?
easy
A.
  • Item 1
  • Item 2
B.
  • Item 1
  • Item 2
C.
  • Item 1
  • Item 2
D.
  • Item 1
  • Item 2

Solution

  1. Step 1: Identify the required classes for horizontal lists

    Bootstrap requires list-inline on the <ul> and list-inline-item on each <li> to display items inline.

  2. Step 2: Check each option for correct usage

    • Item 1
    • Item 2
    correctly applies list-inline to <ul> and list-inline-item to each <li>. Others miss one or both classes.

  3. Final Answer:

    Uses both required classes correctly -> Option D

  4. Quick Check:

    Horizontal list = list-inline + list-inline-item [OK]
Hint: Use both list-inline and list-inline-item [OK]
Common Mistakes:
  • Forgetting list-inline-item on <li>
  • Applying list-inline-item to <ul> instead
  • Using only list-unstyled for horizontal layout
3. What will be the visual result of this code?
<ul class="list-inline">
  <li class="list-inline-item">Apple</li>
  <li class="list-inline-item">Banana</li>
  <li class="list-inline-item">Cherry</li>
</ul>
medium
A. A horizontal list with items side by side
B. A vertical list without bullet points
C. A vertical list with bullet points
D. A numbered list with items stacked

Solution

  1. Step 1: Analyze the classes used

    The list-inline class on <ul> and list-inline-item on <li> make the list items display horizontally.

  2. Step 2: Understand the visual effect

    Items appear side by side without bullets or numbers, forming a horizontal list.

  3. Final Answer:

    A horizontal list with items side by side -> Option A

  4. Quick Check:

    list-inline + list-inline-item = horizontal list [OK]
Hint: Inline classes make list items horizontal [OK]
Common Mistakes:
  • Expecting bullets or vertical stacking
  • Confusing with list-unstyled effect
  • Thinking it creates a numbered list
4. Identify the error in this Bootstrap list code:
<ul class="list-inline-item">
  <li>Home</li>
  <li>About</li>
</ul>
medium
A. The list-inline-item class should be on <li> elements, not <ul>
B. The list-inline-item class is correct on <ul>
C. Missing list-unstyled class on <ul>
D. The list should use list-group class instead

Solution

  1. Step 1: Check where list-inline-item should be applied

    This class must be on each <li> to make items inline, not on the <ul>.

  2. Step 2: Identify the correct class for <ul>

    The <ul> should have list-inline class to enable inline display.

  3. Final Answer:

    The list-inline-item class should be on <li> elements, not <ul> -> Option A

  4. Quick Check:

    list-inline-item belongs on <li> [OK]
Hint: Put list-inline-item on <li>, not <ul> [OK]
Common Mistakes:
  • Applying list-inline-item to <ul>
  • Forgetting list-inline on <ul>
  • Confusing with list-unstyled usage
5. You want a clean vertical list without bullets and also want the items to appear horizontally on small screens but vertically on larger screens. Which Bootstrap classes should you use?
hard
A. Use list-inline on <ul> and list-inline-item on <li> only
B. Use list-unstyled on <ul> and list-inline-item on <li> with responsive utilities
C. Use list-unstyled on <ul> only
D. Use list-inline on <ul> only

Solution

  1. Step 1: Remove bullets for a clean vertical list

    Applying list-unstyled removes bullets and indentation from the vertical list.

  2. Step 2: Make list horizontal on small screens only

    Use list-inline-item on <li> combined with responsive utilities (like d-sm-inline) to switch layout based on screen size.

  3. Step 3: Combine classes for responsive behavior

    Bootstrap does not provide a direct responsive list-inline class, so combining list-unstyled with inline items and responsive display classes achieves the goal.

  4. Final Answer:

    Use list-unstyled on <ul> and list-inline-item on <li> with responsive utilities -> Option B

  5. Quick Check:

    Combine unstyled + inline-item + responsive classes [OK]
Hint: Combine unstyled with inline-item and responsive display classes [OK]
Common Mistakes:
  • Using only list-inline without removing bullets
  • Applying inline classes without responsive utilities
  • Expecting Bootstrap to handle responsive inline lists automatically
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard