CSS
How to Remove Bullets in CSS (Unordered Lists & Ordered Lists)
Bulleted lists (<ul>) and numbered lists (<ol>) are commonly used in web design for navigation menus, to-do lists, or structured content. However, in many cases, designers prefer to remove the default bullets or numbers for styling purposes.
In this blog, we’ll cover:
✅ How to remove bullets from unordered lists (<ul>)
✅ How to remove numbers from ordered lists (<ol>)
✅ How to style lists without bullets or numbers
✅ Best practices for list styling
1. Removing Bullets from Unordered Lists (<ul>)
By default, unordered lists (<ul>) display bullets before each list item. You can remove them using list-style: none;.
Example 1: Removing Bullets with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Bullets from List</title>
<style>
ul {
list-style: none; /* Removes bullets */
padding: 0; /* Removes default padding */
margin: 0; /* Removes default margin */
}
li {
font-size: 18px;
padding: 5px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
✅ Why it works?
list-style: none;removes bullets from the list.padding: 0;andmargin: 0;remove the default spacing applied by browsers.
2. Removing Numbers from Ordered Lists (<ol>)
Ordered lists (<ol>) display numbers (1, 2, 3…) by default. To remove them, use list-style: none;.
Example 2: Removing Numbers from Ordered Lists
<ol class="no-numbers">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
<style>
.no-numbers {
list-style: none; /* Removes numbers */
padding: 0;
margin: 0;
}
</style>
✅ Why it works?
- The
list-style: none;property removes numbering.
3. Removing Bullets & Numbers with list-style-type: none;
You can also use list-style-type: none; instead of list-style: none;.
Example 3: Using list-style-type
ul, ol {
list-style-type: none;
}
✅ Difference?
list-style: none;removes all styles, including custom ones.list-style-type: none;only removes bullets or numbers but allows custom styles (e.g., icons).
4. Removing Bullets While Keeping Indentation
If you want to remove bullets but keep the indentation, use padding-left.
Example 4: Removing Bullets but Keeping Indentation
ul {
list-style: none;
padding-left: 20px; /* Adds space to maintain indentation */
}
5. Using display: inline for Horizontal Lists (e.g., Navigation Menus)
For menus, you might want to remove bullets and display list items horizontally.
Example 5: Making a List Horizontal
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline;
margin-right: 15px;
}
✅ Great for:
✔️ Navigation menus
✔️ Inline buttons
6. Using Custom List Icons Instead of Bullets
If you want to replace bullets with a custom icon (e.g., checkmarks or arrows), use list-style-image.
Example 6: Custom Bullet Icons
ul {
list-style-image: url('checkmark.png'); /* Replace bullets with an image */
}
Or use Font Awesome icons:
ul li::before {
content: "✔"; /* Unicode checkmark */
margin-right: 10px;
}
✅ Why use custom icons?
- Makes lists more visually appealing.
- Allows for brand customization.
7. Best Practices for Styling Lists Without Bullets
✅ Use list-style: none; to remove default bullets or numbers.
✅ Keep padding-left if you need indentation.
✅ Use display: inline; for horizontal lists (like menus).
✅ Replace bullets with custom icons for better UX.
✅ Maintain proper spacing between items using margin or padding.
Conclusion
Removing bullets in CSS is simple with list-style: none; or list-style-type: none;. You can also customize your lists with icons, horizontal layouts, and spacing adjustments.
By following these techniques, you can create cleaner, more professional-looking lists in your web projects.