CSS: How to Remove Bullet Points from Lists – Clean Up Your UI

By default, HTML unordered lists (<ul>) come with bullet points, and ordered lists (<ol>) come with numbers. While these default styles are useful for basic lists, there are many situations in modern web design—like nav menus or stylized sections—where you want to remove bullet points for a cleaner look.

In this blog post, you’ll learn how to remove bullet points using CSS with practical examples and tips.

---

✅ Method 1: Use list-style-type: none;

The most common and reliable way to remove bullet points from a list is to set the list-style-type property to none.

📌 CSS:

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

📌 HTML:

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

✅ Result:

• The list items are still displayed
• No bullet points are shown

---

✅ Method 2: Remove Default Padding and Margin

Even after removing the bullets, you might see extra space due to browser default styles. You can remove that using padding and margin.

📌 CSS:

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

This gives you full control over the list layout, especially when using custom designs or flex/grid layouts.

---

✅ Method 3: Use Inline CSS (Quick Fix)

If you’re just testing or working with minimal HTML, you can use inline styles:

<ul style="list-style-type: none; margin: 0; padding: 0;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

⚠️ Inline styles work but are not recommended for large projects—use external or internal CSS instead for maintainability.

---

✅ Bonus: Remove Dots from Nested Lists Too

If you have nested lists, make sure to apply the style to all levels:

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

---

🧾 Summary

Goal	CSS Strategy
Remove bullets from a list	list-style-type: none;
Eliminate space	margin: 0; padding: 0;
Target specific lists	Add a .no-bullets class
Apply inline (quick only)	style="list-style-type: none;"

---

🧠 Conclusion

Removing bullet points from lists using CSS is simple and essential for building custom navigation menus, cards, grids, and more. With just a couple of CSS rules, you can turn a standard HTML list into a modern, styled component.

---

Pro Tip: Once you remove bullet points, consider using custom icons, grid layouts, or flexbox for better visual alignment.