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

With HTML (HyperText Markup Language), adding the "list-style: none" CSS style 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 (Cascading Style Sheets) 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