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

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