How to Create an Unordered List without Bullets

The <ul> tag is used for specifying items without numerical order. The items of such list are commonly displayed with a bullet. However, it is possible to have an unordered list without any bullets. How to do this? Well, in this snippet, we’re going to show how to remove the bullets with the help of the CSS list-style-type property used for the parent element.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use <h1> and <p> elements.
  • Use <ul> tag to create an unordered list.
  • Add <li> elements inside the <ul> tag.
<h1>W3Docs</h1>
<p>Our books:</p>
<ul>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn Javascript</li>
  <li>Learn Git</li>
</ul>

Add CSS

  • Set the list-style-type property to “none” for the <ul> element.
ul {
  list-style-type: none;
}

Now, you can see the result of our code.

Example of creating an unordered list without bullets:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
    <p>Our books:</p>
    <ul>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
      <li>Learn Javascript</li>
      <li>Learn Git</li>
    </ul>
  </body>
</html>

Result

Our books:

  • Learn HTML
  • Learn CSS
  • Learn Javascript
  • Learn Git

If you want to remove the indentation as well, use the padding and margin properties set to 0.

In our next example, you can see two unordered lists, one of them with bullets, and the other without any bullet and indentation.

Example of creating an unordered list without bullets and indentation:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.no-bullets {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <h3>W3Docs</h3>
    <p>Our books (with bullets):</p>
    <ul>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
      <li>Learn Javascript</li>
      <li>Learn Git</li>
    </ul>
    <p>Our books: (without bullets)</p>
    <ul class="no-bullets">
      <li>Learn HTML</li>
      <li>Learn CSS</li>
      <li>Learn Javascript</li>
      <li>Learn Git</li>
    </ul>
  </body>
</html>