List styles (unstyled, inline) in Bootsrap

Introduction

Lists help organize information clearly. Using styles like unstyled or inline changes how lists look to fit your page design.

When you want a clean list without bullet points or numbers.

When you want list items to appear side by side instead of stacked.

When creating navigation menus that look like buttons or links in a row.

When you want to simplify the look of a list for a footer or header.

When you want to control spacing and alignment of list items easily.

Syntax

Bootsrap

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

list-unstyled removes default bullets and left padding from the list.

list-inline makes list items display side by side horizontally. Each item needs list-inline-item class.

Examples

This list has no bullets or indentation. Items appear stacked vertically but clean.

Bootsrap

<ul class="list-unstyled">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

This list shows items side by side, like a menu bar.

Bootsrap

<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">About</li>
  <li class="list-inline-item">Contact</li>
</ul>

Even with one item, inline style keeps it horizontal (though it looks like normal).

Bootsrap

<ul class="list-inline">
  <li class="list-inline-item">One</li>
</ul>

An empty unstyled list shows nothing but is valid HTML.

Bootsrap

<ul class="list-unstyled">
</ul>

Sample Program

This page shows two lists: one without bullets and one with items side by side. It uses Bootstrap classes to style them.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap List Styles Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <section>
      <h2>Unstyled List</h2>
      <ul class="list-unstyled">
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
      </ul>
    </section>
    <section class="mt-4">
      <h2>Inline List</h2>
      <ul class="list-inline">
        <li class="list-inline-item">Home</li>
        <li class="list-inline-item">Services</li>
        <li class="list-inline-item">Contact</li>
      </ul>
    </section>
  </main>
</body>
</html>

Important Notes

The list-unstyled class removes bullets and left padding but keeps vertical stacking.

The list-inline class requires each <li> to have list-inline-item to display horizontally.

Use unstyled lists when you want a simple vertical list without decoration.

Use inline lists for horizontal menus or when space is limited horizontally.

Summary

Use list-unstyled to remove bullets and indentation from vertical lists.

Use list-inline with list-inline-item on each item to display list items horizontally.

These styles help make lists fit better in different parts of your webpage like menus or clean content sections.

Practice

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 1Item 2

B. Item 1Item 2

C. Item 1Item 2

D. Item 1Item 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