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 CSS file or as a stylesheet. 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.