How to Remove Bullets from an Unordered List in CSS

By the end of this page, you will understand how unordered list bullets work in HTML, how to remove them with CSS, and how this is commonly done in real layouts such as navigation menus, sidebars, and custom-styled lists.

An unordered list in HTML is created with the <ul> element, and each item inside it uses an <li> element. By default, browsers display unordered lists with bullet markers.

If you want to remove those bullets, you usually do it with CSS, not by changing the HTML structure. The main CSS property used is list-style-type, or more commonly list-style.

ul {
  list-style: none;
}

This tells the browser not to display the default list marker.

In many browsers, unordered lists also have default left padding or margin. So even after removing bullets, the list may still appear indented. In that case, you often reset the spacing too:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

This matters because lists are often used for navigation menus, dropdowns, tags, settings panels, and other UI elements where the default bullets do not fit the design. Keeping the semantic <ul> and <li> structure is still important for accessibility and document meaning, even if the bullets are hidden.

Think of a <ul> like a checklist template that comes with built-in decorations. The browser adds bullets automatically, just like a text editor might auto-format a list.

CSS lets you keep the list itself but remove the decoration. So you are not deleting the list, only telling the browser, "Show the items, but do not draw the bullet symbols."

The basic syntax is:

ul {
  list-style: none;
}

A more complete version usually resets spacing too:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

Example:

<ul class="menu">
  <li>Home</li>
  <li>Services</li>
  <li>Blog</li>
</ul>

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

What this does

• list-style: none; removes the bullets

Consider this example:

<ul class="nav-list">
  <li>Home</li>
  <li>Profile</li>
  <li>Settings</li>
</ul>

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

Step by step:

1. The browser reads the HTML and sees a <ul> with three <li> elements.
2. By default, it would normally display a bullet before each <li>.
3. The browser then reads the CSS rule for .nav-list.
4. list-style: none; tells it not to show the bullets.
5. padding: 0; removes the default left indentation.
6. margin: 0; removes extra outer spacing around the list.

Removing bullets from unordered lists is very common in web development.

Navigation menus

Many website menus use <ul> and <li> because they are groups of links.

<ul class="main-nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Bullets are usually removed so the navigation looks clean.

Sidebar link groups

Lists in dashboards or admin panels often need custom styling instead of browser bullets.

Footer link sections

In real projects, developers usually do not remove bullets from every list globally unless the design system requires it. Instead, they target specific classes.

Common pattern: scoped styling

.menu,
.footer-links,
.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

This avoids accidentally changing article content lists that should still show bullets.

Common pattern: navigation reset

Lists used for navigation are often reset first, then turned into horizontal or vertical layouts.

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

Common pattern: custom markers

Developers often remove native bullets and add their own visual markers.

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li::before {
  : ;
  : green;
}

1. Removing bullets but forgetting the indentation

Broken-looking result:

ul {
  list-style: none;
}

This removes bullets, but the list may still have left padding.

Better:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

2. Applying the style to the wrong element

Beginners sometimes write CSS for li instead of ul.

Less clear approach:

li {
  list-style: none;
}

Better:

ul {
  list-style: none;
}

The list style is controlled by the list container in normal usage.

3. Removing bullets from all lists unintentionally

ul {
  list-style: none;
}

/* Remove bullets */
ul {
  list-style: none;
}

/* Remove bullets and default spacing */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Better: target a specific list */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

Quick rules

• Use CSS to remove bullets from a list
• list-style: none; removes the marker
• padding: 0; often removes the left indent
• margin: 0; removes outer spacing
• Prefer styling a class instead of every <ul> globally
• Keep using <ul> and <li> for semantic structure

Common pattern

<ul class="menu">
  <>Item 1
  Item 2

How do I remove bullets from a <ul>?

Use CSS:

ul {
  list-style: none;
}

Why is my list still indented after removing bullets?

Because browsers add default padding or margin. Reset them too:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Can I remove bullets from only one list?

Yes. Add a class to that list and target it:

<ul class="menu">

.menu {
  list-style: none;
}

Should I use <div> instead of <ul> if I do not want bullets?

No. If the content is a list, keep using <ul> and <li>. Remove the bullets with CSS.

What is the difference between and ?

• CSS selectors — Used to target the specific list you want to style.
• HTML lists — Helps you understand the difference between <ul>, <ol>, and <li>.
• CSS margin and padding — Important because list indentation often comes from spacing, not just bullets.
• Navigation menus in HTML and CSS — A common place where bulletless lists are used.
• CSS pseudo-elements — Useful when replacing default bullets with custom icons or symbols.
• CSS reset — Helps explain why browsers apply default list styles and how developers normalize them.