How to remove bullets from list html

HtmlHow-ToBeginner · 3 min read

How to Remove Bullets from List in HTML: Simple CSS Guide

To remove bullets from a list in HTML, use CSS and set list-style-type: none; on the ul or ol element. This hides the default bullet points, making the list appear without markers.

📐

Syntax

Use CSS to control the bullet style of lists. The key property is list-style-type. Setting it to none removes bullets.

ul or ol: The list element you want to style.
list-style-type: none;: Removes the default bullet or number.

css

ul {
  list-style-type: none;
  padding-left: 0; /* Optional: removes default left padding */
}

💻

Example

This example shows a simple unordered list with bullets removed using CSS.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Remove Bullets Example</title>
  <style>
    ul {
      list-style-type: none;
      padding-left: 0;
      font-family: Arial, sans-serif;
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <h2>Shopping List</h2>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
  </ul>
</body>
</html>

Output

<h2>Shopping List</h2> Milk Bread Eggs

⚠️

Common Pitfalls

Sometimes bullets don't disappear because the browser applies default padding or margin to the list. Also, forgetting to set padding-left: 0; can leave space where bullets were.

Another mistake is applying list-style-type: none; to the li elements instead of the ul or ol.

css

/* Wrong: applying to li elements */
ul li {
  list-style-type: none;
}

/* Right: apply to ul or ol */
ul {
  list-style-type: none;
  padding-left: 0;
}

📊

Quick Reference

Remove bullets: list-style-type: none;
Remove left space: padding-left: 0;
Apply to: ul or ol elements
Keep accessibility: Use semantic lists even without bullets

✅

Key Takeaways

Use CSS property list-style-type: none; on ul or ol to remove bullets.

Remove default left padding with padding-left: 0; to avoid extra space.

Apply styles to the list container, not individual li items.

Keep using semantic list tags for accessibility even without visible bullets.

Test in different browsers to ensure consistent bullet removal.