How to hide the bullets on list for the sidebar?

Last Updated : 10 May, 2020

Normally, when we create a list (ordered or unordered) list, it appears in the form of markers or bullets. Few times we donn’t want the bullets or any mark, we just want a simple list without bullets. To do so we can use pure CSS to remove those bullets from the list.

For this we use the CSS list-style-type Property. It specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if ‘list-style-image’ has the value ‘none’. IF we set the none value it will not create the markers or the bullets for the lists. Also we’ll have to set the margin:0 and padding:0 as the lists have a default margin and padding.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

Below example illustrate the approach:

Example:

<!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:

My Personal Notes

Related Articles

Table of Contents

How to hide the bullets on list for the sidebar?