September 16, 2022

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

By Krishnaa JavaScript Questions 0 Comments

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;
}

You May Also Like: