How to hide the bullets on list for the sidebar?

Last Updated : 08 Jun, 2023

In this article we are going to learn How to hide the bullets on a list for the sidebar, To hide the bullets on a list for the sidebar, you can use CSS. Apply the list-style-type: none; property to the <ul>(unordered list) or <ol>(ordered list) element. This will remove the default bullet points. Additionally, you can set padding-left: 0; to remove any indentation. To further customize the appearance, you can apply your own styles, such as using custom icons or designing a different visual indicator for each list item.

The below example illustrates the approach:

Example: Here is the example of the above explanation.

html

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
 
        ul#remove {
            list-style-type: none;
            padding: 0;
        }
 
        .left {
            width: 40%;
            float: left;
        }
 
        .right {
            width: 40%;
            float: right;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
 
        <h2>HTML bulletless list</h2>
    </center>
    <div class="left">
        <p>GeeksforGeeks courses List:</p>
        <ul>
            <li>Geeks</li>
            <li>Sudo</li>
            <li>Gfg</li>
            <li>Gate</li>
            <li>Placement</li>
        </ul>
    </div>
    <div class="right">
        <p>GeeksforGeeks courses List:</p>
        <ul id="remove">
            <li>Geeks</li>
            <li>Sudo</li>
            <li>Gfg</li>
            <li>Gate</li>
            <li>Placement</li>
        </ul>
</body>
</html>