How to Remove Bullet Points from an Unordered List in HTML and CSS

In this tutorial, we will learn how to remove bullet points from an unordered list in HTML and CSS.  In an unordered list, the list items can be listed with bullets, circles, squares, etc. By default, the list items in the unordered list are always marked with bullet points, but in some cases, we are required to remove the bullet points in the unordered list.

The removal of the bullet points in an unordered list is not a difficult task, it can be easily done by using CSS. We simply need to set the list-style-type property to none.

In the following example, we have a list with bullet points and we will simply remove those using CSS. Please have a look over the code example and the steps given below.

HTML

  • We have one ul element in the HTML file with 3 list items.
  • In the head element, we have added a stylesheet style.css using the link element.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bullets removal in unordered list</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</body>

</html>

CSS

  • We are selecting the list using the ul element and its list-style-type property is set to none. As a result, it will remove all the bullet points in the unordered list.
ul {
    list-style-type: none;
}