CSS: How to Remove Bullets from an Unordered List (ul)

Unordered lists (<ul>) in HTML display list items (<li>) with bullets by default. But when designing a clean navigation menu or a custom-styled list, you may want to remove those default bullets.

In this tutorial, you’ll learn how to remove bullets from a list using CSS, along with optional styling tips for cleaner layouts.

Table of Contents

✅ Basic HTML Example

Here’s a standard unordered list:

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

🎨 CSS to Remove Bullets

To remove the default bullets, use the list-style-type property and set it to none.

ul {
  list-style-type: none;
}

💡 This removes the bullets but keeps the indentation (left padding). To remove that too, add padding: 0 or margin: 0.

Full Example:

<style>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
</style>

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

🎯 Optional: Style as Horizontal Menu

Once bullets are removed, you can style the list as a navigation bar:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

li {
  display: inline;
}

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

🧠 Alternative Method: `list-style: none`

You can also use the shorthand:

ul {
  list-style: none;
}

This achieves the same result and is more concise.

🛠️ When Should You Remove Bullets?

✅ When creating navigation bars
✅ For custom styled lists
✅ When using icons instead of default bullets
✅ In cards or grid layouts

🧪 Quick Demo: List Without Bullets

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
  <ul>
    <li>🔹 HTML</li>
    <li>🔹 CSS</li>
    <li>🔹 JavaScript</li>
  </ul>
</body>
</html>

🎯 Conclusion

Removing bullets from unordered lists is a simple but essential CSS technique for clean, modern web layouts. Whether you’re creating menus, cards, or styled sections, using list-style: none gives you full control over how your lists look.