How to Remove Bullet Points in CSS?
Last Updated :
03 Sep, 2024
Bullet points are commonly used in HTML to create unordered lists. They can provide a visual indication of each list item. However, there might be scenarios where you want to remove these bullet points for styling purposes, such as creating a cleaner look for the menu or a custom design.
There are several methods to remove the bullet points in the CSS:
Using the "list-style-type: none" Property
This is the most common and straightforward way to remove the bullet points from a list. The list-style-type property can be specifically used to define the type of the list marker and setting it to none effectively removes the bullet points. The CSS property list-style-type can be specifically designed to control the appearance of the list markers. Setting the list style type to none can disable the default bullet or number that appears with the list items.
Syntax:
ul {
list-style-type: none;
}Example: This example shows the use of a list-style-type property on list items to remove the bullet points.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
/* Removes bullet points */
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<ul>
<li>Java</li>
<li>Spring Boot</li>
<li>Microservices<a /li>
</ul>
</body>
</html>
Output:
OutputUsing the "list-style: none" Property
The list-style property is the shorthand property that combines the list-style-type, list-style-position and list-style-image. By setting the list-style: none;. We can effectively remove all the list styling. This shorthand property can combines the various list styles into a single line. When set to the none, it can disable all default list styles.
Syntax:
ul {
list-style: none;
}Example: This example shows the use of list-style property on list items to remove the bullet points.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
/* Removes bullet points and other list styles */
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<ul>
<li>Java</li>
<li>Spring Boot</li>
<li>Microservices</li>
</ul>
</body>
</html>
Output:
OutputUsing the display: inline; or display: block; on List Items
Setting the display property to inline or block on the list items can sometimes affect the bullets display, effectively removing them. This approach, however, changes the behavior of the list items, which may not always be desirable.By default, list items can be displayed as the block which maintains the bullet points. Changing the display to the inline makes list items act like the inline elements, removing the default bullets.
Syntax:
ul li {
display: inline; /* or display: block; */
}Example: This example shows the use of display property on list items to remove the bullet points.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
display: inline;
/* Changes the list item display behavior */
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</body>
</html>
Output:
Output