We have compiled this guide to provide a set of methods that are used to remove bullets.
How do we Remove Bullets From the List Using CSS?
CSS offers various properties to perform a specific action. The CSS’s list-style property defines the style type of the lists. Its value can remove the bullets from the list by using CSS list-style or list-style-type properties. This property removes bullets from the unordered list. The following practical example will help in understanding the usage of this CSS property better.
Code
<html lang="en">
<head>
<title>First Document</title>
</head>
<body>
<h1 style="color:crimson;">Vegetables List</h1>
<div>
<ul>
<li>Carrot</li>
<li>Cucumber</li>
<li>Potato</li>
<li>Bell pepper</li>
<li>Spinach</li>
</ul>
</div>
<h1 style="color:crimson;">Fruits List</h1>
<div>
<ul style="list-style:none;">
<li>Orange</li>
<li>Mango</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Watermelon</li>
</ul>
</div>
</body>
</html>
In this code, we have created two unordered lists using <ul> tag. Then we applied the CSS list-style property on the second unordered list and set the value of the property to none.
Output
The output clearly shows that the bullets are removed from the second unordered list only.
Note: The list-style is the shorthand property. The list-style-type property can also be used to remove the bullets from the list.
How to Remove the Numerals From Ordered Lists?
With the help of list-style-type property, one can remove the numerals (1, 2, 3) from the ordered lists.
Let’s see the following practical example to remove the numerals from the ordered list.
Code:
<html lang="en">
<head>
<title>First Document</title>
</head>
<body>
<h1 style="color:crimson;">Vegetables List</h1>
<div>
<ol>
<li>Carrot</li>
<li>Cucumber</li>
</ol>
</div>
<h1 style="color:crimson;">Vegetables List</h1>
<div>
<ol style="list-style-type: none;">
<li>Carrot</li>
<li>Cucumber</li>
</ol>
</div>
</body>
</html>
In this code, we create two ordered list and then we remove numerals from one ordered list by using list-style-type property.
Output
The output shows that the numerals are successfully removed from the ordered list.
Conclusion
We can remove bullets from the lists by using CSS “list-style” or “list-style-type” property. The value of both properties is set to none to remove the bullets. This property is effective for both ordered and unordered lists. You have learned multiple ways to remove the bullets from the list. The practical implementation of these examples is also demonstrated here.
