Remove Bullet Points from Unordered List in CSS

In HTML, there are two types of lists, ordered(<ol>) and unordered(<ul>). The list items of an ordered list are represented by numeric values such as 1, 2, 3, … or i, ii, iii, … etc. Whereas, the list items of an unordered list are represented by bullets(•), circles, squares, etc.

Something like this:

HTML ordered list vs unordered list

Sometimes, we may need to get rid of these default bullets from the list, especially while creating the navigation bar for our website.

In this article, I will walk you through the steps of removing bullet points from the unordered list as well as removing numerics from ordered lists.


Remove Bullets from Unordered Lists

The default marker type of the unordered lists is a bullet point(•). Whether the marker type of the list will be a default bullet point, circle, square, or image is controlled by the list-style-type property.

The list-style-type property is also used to show or hide the markers of a list. To remove(hide) the bullets of an unordered list, we have to set the list-style-type property to none.

Let’s say we have two unordered lists in our HTML document and we want to remove bullets from the second list. Therefore, we have assigned a class .no-bullets to it:

<h2>Fruits List</h2>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
    <li>Orange</li>
</ul>

<h2>Vegetables List</h2>
<ul class="no-bullets">
    <li>Potato</li>
    <li>Tomato</li>
    <li>Onion</li>
    <li>Spinch</li>
</ul>

As we want to remove the bullets from the second unordered list, therefore, we have to set its list-style-type property to none in our CSS file:

.no-bullets{
    list-style-type: none; /* Hide bullets */
}
h2{
    color: crimson;
}

After running the above code, you will get the following output:

Remove bullet points from unordered list using CSS

You can see from the above output that only the first list has bullet points. These bullets have been removed from the second list because we have set its list-style-type property to none.


Remove Numerals from Ordered Lists

With the help of the list-style-type property, we can also remove the numerals(1, 2, 3), (i, ii, iii), etc from an ordered list. Here also, we have to set the list-style-type property to none to hide the numerals of the ordered list.

Let’s say we have two ordered lists in our HTML document and we want to remove the numerals from the second list:

<h2>Fruits List</h2>
<ol>
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
    <li>Orange</li>
</ol>

<h2>Vegetables List</h2>
<ol class="no-bullets">
    <li>Potato</li>
    <li>Tomato</li>
    <li>Onion</li>
    <li>Spinch</li>
</ol>

To remove the numerals from the second ordered list, we have to set its list-style-type property to none inside our CSS file:

.no-bullets{
    list-style-type: none; /* Hide numerals */
}
h2{
    color: crimson;
}

And here is the output that we will get after running the above code:

Remove numerals from an ordered list in CSS

Conclusion

In this article, we have learned how we can remove the bullet points from an unordered list.

We can simply set the list-style-type property to none to remove bullet points from an unordered list as well as to remove numerals from an ordered list.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.