How to Make Unordered List without Bullets HTML

How to Make Unorderd List without Bullets HTML

If you’re trying to remove bullets from HTML unordered list. Then, this tutorial will teach you how to make an unordered list without bullets in HTML.

HTML ul lists are marked with bullets, squares, discs, or circles. CSS allows us to remove these bullets in just a few steps. In this tutorial, we’ll explore different methods to do this.

So, get started.

Making Unordered List Without Bullets HTML

We are going to see the following three methods. If you want to jump to the specific method then you can just click the links.

Let’s begin with the first method.

Method #1: Use CSS “list-style-type” Property

The simplest and easiest way to make list without bullets in HTML is by using CSS list-style-type property. We use <ul> the tag that defines the unordered list in HTML. So, we’ll use this property inside <ul> tag by using the style attribute.

What you have to do is just set the list-style-type: none. And this will automatically remove bullets from all list items.

List without Bullets HTML Code Example:

<ul style="list-style-type: none;"> 
   <li>List Item 1</li> 
   <li>List Item 2</li> 
   <li>List Item 3</li> 
   <li>List Item 4</li> 
</ul>

This will remove the bullets from ul. Below is the output of the above code.

list without bullets HTML

If you see the source code using the inspection tool in your browser. The property is set up correctly and is working.

List without Bullets HTML Example

In the above code, I used inline CSS.

However, it doesn’t matter whether you’re using inline CSS or an external stylesheet. Below is the code example for the external stylesheet.

ul { 
  list-style-type: none; 
}

You can copy the above code and paste it into your stylesheet and it will make all your lists without bullets in HTML.

But what if you want to remove bullets of specific lists on your webpage? Not all lists.

Make Specific Lists without Bullets

The better way of removing bullets from only specific lists is by defining the CSS class. All you have to do is just put the class inside <ul> tag and apply CSS to it.

Let’s suppose we use a class name ‘remove-bullets‘. The HTML code will look like this below.

<h2> List without Bullets</h2> 

<!-- Here, the class is defined inside <ul> tag -->

<ul class="remove-bullets"> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
    <li>List item 4</li> 
</ul>


<h2> List with Bullets</h2>

<!--Here no class defined inside <ul> tag -->
<ul> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
    <li>List item 4</li> 
</ul>

The above code contains two lists so that we can see the difference. And I also included some comments in the HTML code.

Now, let’s apply the list-style-type property to the class selector. This will remove the bullets of only that list wherever the ‘remove-bullets‘ class is defined.

List without bullets CSS Code:

.remove-bullets {
    list-style-type: none;
}

If you see the code output below, the first list has no bullets while the other has. Because in the first list, we have defined a class inside <ul> tag.

custom list without bullets

The trick here is that it will remove the bullets from only those HTML lists where the ‘remove-bullets‘ class exists. This way you can remove bullets of only specific lists on your web page.

Moreover, the list-style-type property can also be used for numbered lists.

Method #2: Use CSS “display” Property

In CSS, we use the display property to make changes to how an HTML element should be treated. The most popular values for this property are none, flexbox, table, inline-block, etc. We can also use this for making lists without bullets in HTML.

What you have to do is just set the value of the display property to none for the li HTML element. This will remove all the bullets from your list of items.

HTML code:

<h2>Unordered List without Bullets</h2>
<ul> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
    <li>List item 4</li> 
</ul>

CSS code example:

ul li{ 
    display: block; 
}

I used the same HTML code as above. Then, I defined display: block; the property in CSS.

As a result, if you see the output of the code in your browser. Then, you can see that the display: block; property is working.

create list without bullets using display property

Remember, this property will work on li elements of HTML.

Tip: If you don’t know the difference between HTML elements and tags then check out this guide: HTML Tags vs Elements vs Attributes.

Furthermore, What if you want to remove the bullet from only one list item?

To do this, just add the list-style-type property inside <li> the tag. As shown in the code example below.

<h2> Remove Bullet from Only One List Item</h2>
<ul> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li style="list-style-type: none;">List item 3</li> 
    <li>List item 4</li> 
</ul>

This example removes the bullet from only one list item as shown in the code output below.

Remove bullet from only one list item

Now, let’s go ahead and see the third method.

Method #3: Making Horizontal List without Bullets in HTML

To make list without bullets in the horizontal direction, we use the ‘display‘ property and set its value to ‘inline-block‘. It converts the li elements into inline-block elements. Let’s see the code example.

CSS Code:

ul li{
    display: inline-block;
}

The output of the code above:

horizontal list example

Often, web developers use horizontal lists to make navigation menus.

There’s a way to use images and icons instead of bullets or numbers. To do this, you can check this tutorial about the CSS list-style-image property.

That’s it. Finally, this is how you can make list without bullets in HTML. I hope, this tutorial would solve the problem.

If you have any questions, feel free to ask in the comment section below.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top