How to Get Rid of Bullet Points in CSS?

Bullet points are automatically added to unordered lists (<ul>) in HTML. While they are useful for listing items, sometimes you may want to remove them for styling purposes. Thankfully, CSS provides simple ways to remove bullet points from lists.

In this blog, we’ll explore different methods to remove bullets using CSS and best practices for styling lists.

1. Remove Bullet Points Using list-style: none;

The easiest way to remove bullet points is by using the list-style: none; property in CSS.

Example:

ul {
    list-style: none; /* Removes bullet points */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

✅ Best for: Basic lists where you don’t need bullet points.

---

2. Remove Bullets and Align Items Properly

By default, unordered lists have extra padding and margins. If your list items don’t align as expected after removing the bullets, you can reset their spacing:

Example:

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

li {
    padding: 5px 0; /* Adds spacing between list items */
}

This ensures the list items are properly aligned after removing the bullets.

---

3. Remove Bullets for a Specific List Only

If you have multiple lists and want to remove bullets from only one, use a class or ID selector:

Example:

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

<ul class="no-bullets">
    <li>Custom List Item 1</li>
    <li>Custom List Item 2</li>
</ul>

This keeps other lists unaffected while applying the styling only to the list with the no-bullets class.

---

4. Alternative: Use list-style-type: none;

Another way to remove bullet points is by using list-style-type: none;, which works similarly to list-style: none;.

Example:

ul {
    list-style-type: none;
}

Both list-style: none; and list-style-type: none; achieve the same effect, but list-style is the more commonly used shorthand.

---

5. Removing Bullets from Ordered Lists (<ol>)

If you want to remove numbers from an ordered list (<ol>), you can use the same approach:

Example:

ol {
    list-style: none;
}

This removes the default numbering from an ordered list.

---

6. Removing Bullets but Keeping Indentation

If you want to remove bullet points but keep the indentation, use list-style: none; while keeping the padding:

Example:

ul {
    list-style: none;
    padding-left: 20px; /* Adjust for indentation */
}

This is useful if you want a cleaner look but still maintain the spacing of a traditional list.

---

Conclusion

Removing bullet points in CSS is simple with list-style: none; or list-style-type: none;. You can also reset padding and margins for better alignment. If needed, use classes to target specific lists while keeping other lists unaffected.