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>
You could also apply this class to any of the list items (<li>) to removed bullets from some, 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