JIYIK CN >

In this article, we will learn to hide the bullet points of a list in HTML. Developers can use HTML lists to display related items point by point.

We can <ol>create ordered lists using the HTML tag and <ul>unordered lists using the HTML <ul>tag. Use default to create black circles for bullets, and similarly, use <ol>default to create numbers for bullets.

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

Hide default bullet points using custom CSS

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

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

Sample 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 like.

Output:

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

In the code below, you can see that we have accessed all the list items using ulthe and oltags and changed their CSS.

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

In the output below, user can observe that the points for ordered and unordered lists are hidden.

Output:

Additionally, developers can use inline CSS to hide bullet points for specific list items. In the example below, we have created an unordered list and hidden the bullet points for certain items.

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

In the output below, the user can still see the bullet points for the Netherlands items, while the bullet points for the DelftStack and Germany items are hidden because we applied list-style type:none; using inline CSS.

Output:

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