How to remove bullet points in CSS

Removing bullet points from lists can help achieve a cleaner and more customized look for your web pages. There are several methods to remove bullet points in CSS, each offering different levels of control and flexibility. In this article, we'll explore different techniques to remove bullet points using CSS properties.

Using Bootstrap

Bootstrap, a popular front-end framework, includes utility classes that can help remove bullet points from lists.

  • Use the list-unstyled class provided by Bootstrap to remove bullet points from the list items.
  • This method is quick and easy, especially if you are already using Bootstrap in your project.

  • Item 1
  • Item 2
  • Item 3
        
            
        <ul class="list-unstyled">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>

Using CSS

The list-style shorthand property can be used to remove bullet points. This property allows you to set all list style properties at once.

  • The list-style: none; property removes the bullet points and allows for more compact CSS.
  • The padding-left: 0; property is optional and removes the default padding applied by some browsers.
  • Apply the no-bullets class to any <ul> or <ol> element to remove the bullet points.

  • Item 1
  • Item 2
  • Item 3
        
            
        <ul class="no-bullets">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
        
        
    
        
            
        ul.no-bullets {
          list-style: none;
          padding-left: 0; /* Optional: remove default padding */
        }