Open In App

How to hide the bullets on list for the sidebar?

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:



Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads