CSS: How to Remove Bullet Points from ul and li Elements

By default, the <ul> (unordered list) element renders bullet points for each <li> (list item). While helpful in basic layouts, bullet points often get in the way of custom designs like navigation menus, sidebars, or footers. The good news? CSS makes it easy to remove bullets from <ul> and <li> elements with just a few lines.

In this post, we’ll show you exactly how to remove bullet points from lists using clean, maintainable CSS.

Table of Contents

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

The most direct way to remove bullets is by using the list-style-type property.

📌 CSS:

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

📌 HTML:

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

✅ Result:

The bullet points are completely removed.
The list still functions as a block element.

✅ Method 2: Remove Margin and Padding

Browsers often add default padding-left or margin to <ul>. To fully align the list with your layout, remove this spacing too:

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

This ensures your list aligns flush with containers or other UI elements.

✅ Method 3: Apply to All Lists (Global Reset)

If you want to remove bullets from all unordered lists site-wide:

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

⚠️ Only use this if your entire design doesn’t require default bullets, or use it with a CSS reset strategy.

✅ Method 4: Inline CSS (Quick Use)

You can also remove bullets directly in the HTML for quick tests:

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

✅ Good for quick edits, but not recommended for production code.

🧾 Summary

Goal	CSS Strategy
Remove bullets from one list	`ul.no-bullets { list-style-type: none; }`
Remove spacing with bullets	Add `margin: 0; padding: 0;`
Remove bullets from all `<ul>` lists	Use `ul { list-style-type: none; }`
Quick fix	Inline style with `list-style-type: none;`

🧠 Conclusion

Removing bullets from <ul> and <li> elements is a simple but essential skill in CSS, especially when building custom menus or card-based layouts. With list-style-type: none and a little margin/padding adjustment, you can turn default HTML lists into flexible, modern UI components.

Pro Tip: Once you remove bullets, you can use icons, images, or pseudo-elements (::before) to add custom visual markers for more stylish list items.

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