PUBLISHED ON: JULY 28, 2021
How to make an unordered list without any bullets?
HTML list is used to structure the items within the webpage. It can be in the ordered form with some numerical or alphanumeric numbers or it can be just listed out with bullets using an unordered list. Here, we are going to discuss an unordered list with and without bullets.
Creating an unordered list using HTML
To create an unordered list use <ul> tag, and add items to the <li> element within <ul> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li>Item1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
Output
In the output, we can see that the list contains the bullets.
Removing bullets from the unordered list
We can remove the bullets from the unordered list using CSS. Add a list-style-type property with none value. Let's create an unordered list without bullets.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<h2> Unordered List without bullets </h2>
<ul>
<li>Item1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
Output
In the output given below, we have a list of items without bullets.
Conclusion
So, we have learned to create an unordered list. An unordered list can be easily created without using the bullets. Just use the CSS property to remove the bullets from the list.
