How to hide the bullets on list for the sidebar?

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.

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

Recommended Posts: