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

Unordered lists (<ul>) by default display bullets (•) before each list item. While useful for standard lists, sometimes you want a cleaner, bullet-free layout—especially for navigation menus, custom-styled lists, or footer links.

In this blog post, you’ll learn:

• ✅ How to remove bullets from a <ul> using CSS
• ✅ How to handle padding and margin for clean alignment
• 🧪 Practical examples for menus and lists
• 💡 Bonus: Style your list with icons or custom markers

✅ 1. Basic Method: list-style-type: none

The simplest way to remove bullets is to use the list-style-type property in CSS.

✅ HTML:

<ul class="no-bullets">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

✅ CSS:

.no-bullets {
  list-style-type: none;
}

🎯 This removes the default bullet points—but note: indentation may remain.

✅ 2. Remove Extra Space with padding and margin

After removing bullets, you may also want to eliminate unwanted indentation.

✅ CSS (Improved):

.no-bullets {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

✅ This gives you a clean, left-aligned list—great for headers, footers, or navbars.

✅ 3. Bullet-Free Navigation Menu Example

<ul class="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
</ul>

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

.navbar li a {
  text-decoration: none;
  color: #333;
}

✅ This creates a horizontal menu with no bullets and styled links.

💡 Bonus: Add Custom Icons Instead of Bullets

You can also replace bullets with your own icons or emojis:

ul.custom-icons {
  list-style: none;
  padding-left: 0;
}

ul.custom-icons li::before {
  content: "👉 ";
  color: #007BFF;
}

<ul class="custom-icons">
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ul>

🎨 This creates a modern, branded list with custom indicators instead of bullets.

🧠 Summary

🏁 Final Thoughts

Removing bullets from a <ul> with CSS is simple, but knowing how to also clean up spacing and optionally add custom styles can take your design to the next level. Whether you’re styling navigation menus or customizing layout, a bullet-free list gives you greater visual control.