2943

I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them.

Is it possible to have a list without bullets?

Improve this question
0

16 Answers 16

Reset to default
4202

You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:

ul {
  list-style-type: none;
}

You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.

See Listutorial for a great walkthrough of list formatting techniques.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

@tovmeod Seems to work fine in my IE9 (on Win7). (it is a complex page, not a simple POC, maybe something else changed the behavior)
If you are like me and also looking for how to remove the indent, see this - stackoverflow.com/a/13939142/846727
Nice touch on padding and margins
There is a much more elegant solution to display lists without bullets in the answer by @shaneb below. It makes use of the HTML5 object 'Description Lists'.
Bonus: you might need to add padding-inline-start: 0 if you want to get rid of the left margin.
|
740

If you're using Bootstrap, it has an "unstyled" class:

Remove the default list-style and left padding on list items (immediate children only).

Bootstrap 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

Bootstrap 3, 4, and 5:

<ul class="list-unstyled">
   <li>...</li>
</ul>

Bootstrap 3: http://getbootstrap.com/css/#type-lists

Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

Bootstrap 5: https://getbootstrap.com/docs/5.0/content/typography/#unstyled

Improve this answer

4 Comments

If we listed classes for every CSS framework, we would have a mess on StackOverflow. A quick Google search reveals Bootstrap was only used by 2% of websites at its peak, and surely that's falling with the introduction of more sensible solutions like flexbox and css grid.
Actually, this answer is exactly what I was looking for. And Bootstrap is used by 3.6% of the entire Internet, so it's not falling. trends.builtwith.com/docinfo/Twitter-Bootstrap A quick Google search reveals that Bootstrap is consistently placed in the "most popular CSS frameworks" category.
@PJBrunet If we listed classes for every CSS framework, we would have much more people getting answers to their questions. Moreover, the OP didn't mention that he's interested only in a pure CSS solution.
Instead of class I would use id here if ul is unique. If not, stay with class.
230

You need to use list-style: none;

<ul style="list-style: none;">
    <li>...</li>
</ul>
Improve this answer

1 Comment

Be aware that inline css overrules css in files. Depending on the application/development practices it can be really annoying.
52

Small refinement to the previous answers: To make longer lines more readable if they spill over to additional screen lines:

ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}
Improve this answer

2 Comments

Works, but only for IE8
It's unnecessary to put list-style-type: none; on both the ul and the li. You can just do one.
21

If you're unable to make it work at the <ul> level, you might need to place the list-style-type: none; at the <li> level:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

You can create a CSS class to avoid this repetition:

<style>
ul.no-bullets li
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

When necessary, use !important:

<style>
ul.no-bullets li
{
    list-style-type: none !important;
}
</style>
Improve this answer

1 Comment

Using !important is bad practice and unnecessary, if the code doesn't work make sure your new code is below the old one. In big projects when they want to make things dynamic !important can become very problematic.
16

I used list-style on both the ul and the li to remove the bullets. I wanted to replace the bullets with a custom character, in this case a 'dash'. That gives a nicely indented effect that works fine when the text wraps.

ul.dashed-list {
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}
<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

Improve this answer

Comments

8

If you wanted to accomplish this with pure HTML alone, this solution will work across all major browsers:

Description Lists

Simply using the following HTML:

    <dl>
      <dt>List Item 1</dt>
        <dd>Sub-Item 1.1</dd>
      <dt>List Item 2</dt>
        <dd>Sub-Item 2.1</dd>
        <dd>Sub-Item 2.2</dd>
        <dd>Sub-Item 2.3</dd>
      <dt>List Item 3</dt>
        <dd>Sub-Item 3.1</dd>
    </dl>

Example here: https://jsfiddle.net/zumcmvma/2/

Reference here: https://www.w3schools.com/tags/tag_dl.asp

Improve this answer

3 Comments

If you're going to use this method, use the semantically proper way of entering a term to be defined in <dt> and the definition of that term in <dd>.
This is the best answer to the question, although the people who pose this question are unaware of this much more elegant solution, so they would dissagree, but this solution produces the best results.
Thanks for the acknowledgement @Cagy79 ^_^ Ya know I actually included a note in my original answer specifically saying I thought it was more "elegant" which got edited out long ago, so I love that you used that term. I can see the CSS examples being useful in cases where they cannot edit the base page, but I find this to be best if the page html can be edited directly.
8

This orders a list vertically without bullet points. In just one line!

li {
    display: block;
}
Improve this answer

2 Comments

Technical note: this works because it overrides the default display value of <li>, which is display: list-item;.
This solution also happens to instantly work with nested lists as well which I am pleasantly surprised by.
6

To completely remove the ul default style:

list-style-type: none;

margin: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
Improve this answer

1 Comment

Why isn't margin: 0 sufficient to handle all the other margin- properties?
5

If you are developing an existing theme, it's possible that the theme has a custom list style.

So if you can't change the list style using list-style: none; in ul or li tags, first check with !important, because maybe some other line of style is overwriting your style. If !important fixed it, you should find a more specific selector and clear out the !important.

li {
    list-style: none !important;
}

If it's not the case, then check the li:before. If it contains the content, then do:

li:before {
    display: none;
}
Improve this answer

Comments

1

You can hide them using ::marker pseudo-element.

  1. Transparent ::marker
ul li::marker {
  color: transparent;
}


ul li::marker {
  color: transparent;
}

ul {
  padding-inline-start: 10px; /* Just to reset the browser initial padding */
}
<ul>
  <li> Bullets are bothersome </li>
  <li> I want to remove them. </li>
  <li> Hey! ::marker to the rescue </li>
</ul>

  1. ::marker empty content
ul li::marker {
  content: "";
}


ul li::marker {
   content: "";
}
<ul>
  <li> Bullets are bothersome </li>
  <li> I want to remove them </li>
  <li> Hey! ::marker to the rescue </li>
</ul>

It is better when you need to remove bullets from a specific list item.

ul li:nth-child(n)::marker { /* Replace n with the list item's position*/
   content: "";
}


ul li:not(:nth-child(2))::marker {
   content: "";
}
<ul>
  <li> Bullets are bothersome </li>
  <li> But I can live with it using ::marker </li>
  <li> Not again though </li>
</ul>

Improve this answer

Comments

1

In BOOTSTRAP You can remove bullets by setting the list-unstyled class on the parent class of the li tag.

<ul className="list-unstyled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
Improve this answer

2 Comments

Bootstrap is already covered in another answer.
className is only valid in ReactJS.
0 
ul{list-style-type:none;}

Just set the style of unordered list is none.

Improve this answer

1 Comment

Is there something new in this answer that wasn't already said?
-1

I tried and observed:

header ul {
   margin: 0;
   padding: 0;
}
Improve this answer

1 Comment

This doesn't actually remove the bullets. They just get pushed off-screen.
-2 
 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>
Improve this answer

Comments

-9

In case you want to keep things simple without resorting to CSS, I just put a &nbsp; in my code lines. I.e., <table></table>.

Yeah, it leaves a few spaces, but that's not a bad thing.

Improve this answer

1 Comment

-1 Simple? Without CSS? This is why many websites are in the shocking state they are. CSS adds simplicity. Tables are not the way forward.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.