Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create an unordered list without bullets in HTML?
An unordered list in HTML displays a list of items marked with bullets (?), circles, discs, or squares by default. The <ul> tag creates an unordered list, and each list item is defined using the <li> tag. However, sometimes you need to display a list without any bullets for cleaner presentation or custom styling.
To remove bullets from an unordered list, you can use the CSS list-style-type property set to none. This property controls the appearance of list item markers and can be applied inline or through external CSS.
Syntax
Following is the syntax to create an unordered list without bullets using inline CSS −
<ul style="list-style-type: none"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
Following is the syntax using external CSS −
ul {
list-style-type: none;
}
Using Inline CSS to Remove Bullets
Example
Following example shows how to create an unordered list without bullets using inline CSS −
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Without Bullets</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Team Members</h2>
<ul style="list-style-type: none; padding-left: 0;">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
<li>Maria</li>
</ul>
</body>
</html>
The output of the above code displays a clean list without any bullets −
Team Members Abdul Jason Yadav Maria
Using External CSS to Remove Bullets
Example
Following example demonstrates removing bullets using external CSS styling −
<!DOCTYPE html>
<html>
<head>
<title>CSS List Style Example</title>
<style>
.no-bullets {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.no-bullets li {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Developed Countries</h2>
<p>The list of developed countries:</p>
<ul class="no-bullets">
<li>United States</li>
<li>Australia</li>
<li>New Zealand</li>
<li>Canada</li>
<li>Germany</li>
</ul>
</body>
</html>
The output shows a styled list without bullets, with subtle borders between items −
Developed Countries The list of developed countries: United States Australia New Zealand Canada Germany
Comparison of List Styles
Example − With and Without Bullets
Following example compares regular unordered lists with bullet-free lists −
<!DOCTYPE html>
<html>
<head>
<title>List Comparison</title>
<style>
.comparison {
display: flex;
gap: 40px;
}
.list-section {
flex: 1;
}
.no-bullets {
list-style-type: none;
padding-left: 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="comparison">
<div class="list-section">
<h3>With Bullets (Default)</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div class="list-section">
<h3>Without Bullets</h3>
<ul class="no-bullets">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
</html>
This example clearly shows the difference between bulleted and non-bulleted lists side by side.
Additional Styling Options
When removing bullets, you might also want to remove the default left padding and margin to align your list items with other content. The padding-left: 0 and margin: 0 properties help achieve this alignment.
| CSS Property | Purpose | Common Value |
|---|---|---|
list-style-type |
Controls the bullet style |
none, disc, circle, square
|
padding-left |
Controls left spacing |
0 (removes default indentation) |
margin |
Controls outer spacing |
0 (removes default margins) |
Common Use Cases
Bullet-free unordered lists are commonly used for −
-
Navigation menus − Creating horizontal or vertical navigation bars without bullet points.
-
Contact information − Displaying addresses, phone numbers, and email addresses in a clean format.
-
Feature lists − Showcasing product features or service benefits with custom icons or styling.
-
Social media links − Creating clean lists of social media platforms or external links.
Conclusion
Removing bullets from unordered lists in HTML is accomplished using the CSS list-style-type: none property. This technique creates cleaner, more customizable list presentations that can be styled according to your design requirements. Remember to also adjust padding and margins for optimal alignment and spacing in your layouts.
20K+ Views
