CSS
How to Remove Bullets in CSS (List Styling Guide)
Bullets are the default markers for unordered lists (<ul>) in HTML. While they are useful for list visibility, sometimes you may want to remove them to create a cleaner design.
In this blog, we’ll cover:
✅ How to remove bullets using list-style-type
✅ How to remove bullets using list-style shorthand
✅ How to remove bullets while keeping indentation
✅ How to remove bullets using CSS frameworks (Bootstrap & Tailwind CSS)
1. Remove Bullets Using list-style-type: none;
The easiest way to remove bullets from a list is by setting list-style-type to none.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Bullets</title>
<style>
ul {
list-style-type: none; /* Removes bullets */
}
</style>
</head>
<body>
<h2>List Without Bullets</h2>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</body>
</html>
✅ Why it works?
list-style-type: none;removes the default bullet points from the list items (<li>).
2. Remove Bullets Using list-style Shorthand
Instead of specifying list-style-type separately, you can use the list-style shorthand.
Example:
ul {
list-style: none;
}
✅ This method is shorter and removes bullets completely.
3. Remove Bullets While Keeping Indentation
By default, when you remove bullets, list items shift left. To maintain indentation, use padding-left or margin-left.
Example:
ul {
list-style-type: none;
padding-left: 20px; /* Keeps indentation */
}
✅ Why it works?
- Bullets are removed, but the text remains properly indented.
4. Remove Bullets from a Specific List
If you only want to remove bullets from a particular list, use a class or ID selector.
Example:
<ul class="no-bullets">
<li>First Item</li>
<li>Second Item</li>
</ul>
<style>
.no-bullets {
list-style: none;
padding-left: 20px;
}
</style>
✅ This ensures only certain lists lose their bullets.
5. Remove Bullets Using Bootstrap & Tailwind CSS
📌 Remove Bullets in Bootstrap
Bootstrap provides a .list-unstyled class to remove bullets.
Example:
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
✅ Why it works?
.list-unstyledremoves bullets and resets padding/margin.
📌 Remove Bullets in Tailwind CSS
Tailwind CSS provides a utility class list-none to remove bullets.
Example:
<ul class="list-none">
<li>Item 1</li>
<li>Item 2</li>
</ul>
✅ This makes the list bullet-free instantly.
Conclusion
To remove bullets in CSS:
✅ Use list-style-type: none; for a simple fix.
✅ Use list-style: none; for shorthand.
✅ Use padding-left to keep indentation.
✅ Use Bootstrap (.list-unstyled) or Tailwind (list-none) for quick styling.
By applying these techniques, you can style lists cleanly and professionally!