How to Hide the Bullet Points Using CSS

In this article, we will learn to hide the bullet points of the list in HTML. Developers can show the related items point-wise using the HTML lists.

We can create the order list using the <ol> HTML tag and an unordered list using the <ul> HTML tag. Using the <ul> creates the black circle for the bullet points by default, and in the same way, using the <ol> makes the numbers for the bullet points by default.

Now, to set the custom images or icons as bullet points, we need to hide the default bullet points, which is what we will do in this article.

Use Custom CSS to Hide the Default Bullet Points

Using CSS, we will only hide the bullet points in the example below.

Here, we have created the two lists of programming languages. One list is the unordered list created using the <ul> tag, and another is the ordered list created using the <ol> HTML tag.

Example Code:

<ul>
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<ol>
  <li>Python</li>
  <li>Node Js</li>
  <li>Django</li>
</ol>

In the output below, users can see how the default bullet points look.

Output:

To hide the default bullet points, we will apply the list-style-type: none; to the HTML lists to hide the default bullet points.

In the below code, users can see that we have accessed all the list items using the ul and ol tags and changed their CSS.

ul li {
list-style-type: none;
}
ol li {
list-style-type: none;
}

In the output below, users can observe that the bullet points of the ordered and the unordered list is hidden.

Output:

Also, developers can use inline CSS to hide the bullet point for a particular list item. In the below example, we have created the unordered list and hidden the bullet points for some items.

<ul>
  <li style="list-style-type: none;">DelftStack</li>
  <li>Netherlands</li>
  <li style="list-style-type: none;">Germany</li>
</ul>

In the below output, users can still see the bullet point for the Netherlands item, whereas bullet points are hidden for the DelftStack and Germany items as we have applied the list-style-type: none; using inline CSS.

Output:

In this article, we have seen how to eliminate bullet points of all items. Also, we have seen the example code with output to hide the bullet point of the particular list item.