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.

Create HTML

Use <h1> and <p> elements.
Use <ul> tag to create an unordered list.
Add <li> elements inside the <ul> tag.

How to Create an Unordered List without Bullets

<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.

How to Create an Unordered List without Bullets

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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">Our books:

Learn HTML
Learn CSS
Learn Javascript
Learn Git

</div>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>

Try it Yourself »