BootstrapHow-ToBeginner · 3 min read

How to Use List Unstyled in Bootstrap: Simple Guide

To use an unstyled list in Bootstrap, add the list-unstyled class to your <ul> or <ol> element. This removes the default bullets or numbers, giving you a clean list without any markers.

📐

Syntax

The list-unstyled class is added directly to the list element (<ul> or <ol>) to remove default list markers like bullets or numbers.

Example parts:

<ul>: The unordered list element.
class="list-unstyled": Bootstrap class that removes default styling.
<li>: List items inside the list.

html

<ul class="list-unstyled">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Output

A vertical list of three items with no bullets or numbers.

💻

Example

This example shows a simple unordered list with the list-unstyled class applied. The list items appear stacked vertically without any bullet points.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap List Unstyled Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="p-3">
    <h2>Unstyled List Example</h2>
    <ul class="list-unstyled">
      <li>Apple</li>
      <li>Banana</li>
      <li>Cherry</li>
    </ul>
  </main>
</body>
</html>

Output

A heading 'Unstyled List Example' and below it a vertical list of 'Apple', 'Banana', and 'Cherry' with no bullets.

⚠️

Common Pitfalls

Common mistakes when using list-unstyled include:

Not adding the class to the <ul> or <ol> element itself.
Expecting the class to style list items beyond removing bullets (it only removes default markers).
Using it on elements other than lists, which has no effect.

Always ensure your list structure is correct and the class is on the list container.

html

<!-- Wrong: class on list items -->
<ul>
  <li class="list-unstyled">Item 1</li>
  <li class="list-unstyled">Item 2</li>
</ul>

<!-- Right: class on the ul element -->
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Output

The first list shows bullets because class is on <li>, the second list has no bullets because class is on <ul>.

📊

Quick Reference

Class	Effect	Usage
list-unstyled	Removes default bullets or numbers from lists	Add to or element
list-inline	Displays list items horizontally	Add to or element
list-inline-item	Used on to display inline with spacing	Add to inside a list-inline

✅

Key Takeaways

Add the class list-unstyled to your <ul> or <ol> to remove bullets or numbers.

The class only removes default list markers; it does not add other styles.

Do not put list-unstyled on individual <li> elements.

Use Bootstrap's CDN or local CSS to ensure the class works.

For horizontal lists, consider list-inline instead.