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
• margin: 0; removes default outer spacing
• padding: 0; removes default indentation

You can also target a specific list instead of every <ul> on the page. This is usually better in real projects:

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

That way, only lists with the sidebar-links class lose their 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.
7. The result is still a semantic list, but visually it appears as plain text items without bullets.

Final rendered result:

• No bullet markers
• No extra left indent
• No default top or bottom spacing

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

Many footers use lists for grouped links, but the bullet markers are hidden.

Mobile menus and dropdowns

Dropdown items are often structured as lists for semantics, then styled without bullets.

Custom list designs

You may remove default bullets and replace them with icons, checkmarks, or custom spacing.

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 {
  content: "✓ ";
  color: green;
}

Common pattern: CSS reset or normalize

Some codebases use a reset stylesheet that removes default browser list styles in selected UI components, making styling more predictable.

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;
}

This affects every unordered list on the whole page, including article content where bullets may be useful.

Safer:

.custom-list {
  list-style: none;
}

4. Replacing <ul> with plain <div> elements

Some beginners remove the list entirely just to avoid bullets. That loses semantic meaning.

Avoid:

<div>Home</div>
<div>About</div>
<div>Contact</div>

Prefer:

<ul class="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Then style it with CSS.

5. Confusing list-style-type and display

Bullets are controlled by list styling, not by changing the display type of the element.

Wrong idea:

ul {
  display: block;
}

This does not remove bullets.

list-style vs list-style-type

• list-style is a shorthand property.
• list-style-type controls only the marker type.
• For beginners, list-style: none; is simple and common.

Global selector vs class selector

/* 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">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

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

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 list-style and list-style-type?

list-style is a shorthand. list-style-type controls just the bullet or number style.

Does this work for ordered lists too?

Yes. You can also remove numbers from an <ol> using:

ol {
  list-style: none;
}

• 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.