How to Remove the Bullets from an Unordered List with CSS

In this tutorial, we go over how to remove the bullets from an unordered list using CSS, which are created by default with unordered lists.

When you create an unordered list in HTML, by default, the list is made containing bullet points.

Below is an example of an unordered list, in the default state, without any modifications made to the CSS code for this unordered list tag.

Things To Pick Up At the Supermarket

• Toothbrush
• Toothpaste
• Apples
• A Bag of Lettuce
• Bananas

The HTML code to create the above unordered list is:

<ul> <li>Toothbrush</li> <li>Toothpaste</li> <li>Apples</li> <li>A Bag of Lettuce</li> <li>Bananas</li> </ul>

Having the bullets may be desired at times, but at other times, you may want these removed.

This is the same list as above, only now the bullets are removed.

Things To Pick Up At the Supermarket

• Toothbrush
• Toothpaste
• Apples
• A Bag of Lettuce
• Bananas

To remove the bullets from an unordered list, use the following HTML code to do so.

<ul class="nobullets"> <li>Toothbrush</li> <li>Toothpaste</li> <li>Apples</li> <li>A Bag of Lettuce</li> <li>Bananas</li> </ul>

This HTML code assigns the unordered list to the class called nobullets. This is important because now we can go the CSS page and modify this class nobullets to allow for an unordered list without bullets.

Now we go to the linked CSS page and add in the lines of CSS:

.nobullets { list-style:none; }

This enables you to remove bullets from unordered lists with CSS.