How to create a bullet list with no bullets in HTML

In some situations, you may want to create a bullet list with no bullets or a list items with no bullets. To create an ordered list or unordered list with no bullets (hide the bullets), follow the steps below.

HTML example

Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.

<ul style="list-style: none;">
 <li>List item with no bullet</li>
 <li>Second item</li>
</ul>

HTML with CSS example

Although the above example works in almost every situation, it is better to have the CSS in a separate, external file. Below is the CSS and HTML that removes bullets.

Using the CSS below removes bullets from all unordered links (<ul>). This CSS can be useful if you have no intentions of using bullets or want to use an image instead of a bullet.

<style type="text/css">
 ul {
  list-style-type: none;
 }
</style>

If you only intend to have one list, not have bullets or numbers, it's a better idea to create a class to be used anytime you do not want bullets:

<style type="text/css">
 .nobull {
  list-style-type: none;
 }
</style>

In the above CSS, a new class called "nobull" is created. This class can then be used anytime you do not want a bullet as shown in the example below.

<ul class="nobull">
 <li>List item with no bullet</li>
 <li>Second item</li>
</ul>

Example output

Below is an example of how the output for an unordered bullet list appears without its bullets.

• List item with no bullet
• Second item