How To Remove Bullet List In Html

When working with ordered or unordered list items, html authomatically add bullets to distinguish each list item from the other, however, not every designer wants a bullet list and as such the need to remove bullet list in Html.

so how do we remove the bullet list ?
whatever list type you use (ordered or unordered), removing the list style type is the same.
so lets take the following html code as our html

Html

<ul>
        <li>Bullet 1</li>
        <li>Bullet 2</li>
        <li>Bullet 3</li>
    </ul>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol> 

by default, your output should look like what is shown below

Result

In this tutorial, we learn how to use html list and most importantly how we can remove bullet list in Html.

The unordered list items has (.) while the ordered list items has (1,2,3).

So to remove the bullet list, we add the following Css code,

css
ul,ol{
  list-style: none; 
  list-style-type: none;
}

with that two line of code, you have successfully remove/hide the bullet list.

To style the bullet instead or removing it, you can check how to change the bullet list color and size

Result

In this tutorial, we learn how to use html list and most importantly how we can remove bullet list in Html.

hopefully you understand how simple it is to work with list items especially how to remove bullet list in Html.

Leave a Comment

Your email address will not be published. Required fields are marked *