How to create a bullet list with no bullets in HTML

Updated: 12/31/2017 by Computer Hope

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, follow the steps below.

HTML example

Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag will remove 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 generally a better idea to have the CSS in a separate, external CSS file. Below is the CSS and HTML that can be used to remove bullets.

Using the CSS below removes bullets from all unordered links (<ul>), which 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 is a better idea to create a class that can be used anytime you do not want bullets as shown in the CSS below.

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

Tip

You could also apply this class to any of the list items (<li>) to have one or more bullet items not have a bullet, while keeping the other bullets unchanged.

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

Additional information