I need an unordered list without any bullets

Question

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?

Diaster

Answer 1

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.

Mourner

@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) – Catsup

If you are like me and also looking for how to remove the indent, see this - https://mcmap.net/q/40809/-how-to-remove-indentation-from-an-unordered-list-item – Wraith

Nice touch on padding and margins – Dosi

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'. – Bernadinebernadotte

Bonus: you might need to add padding-inline-start: 0 if you want to get rid of the left margin. – Tumultuous

Beware that this also removes the list character for assistive technology, and will render your list way more difficult to navigate for users with disabilities—if it is a legitimate list, that is! – Idona

In JS it is ul.style.listStyleType = "none" – Louise

using django I went to base.css and changed to ul > li { list-style-type: none; padding: 1px 0; } li ul { margin-bottom: 0; list-style-type: none; } – Watercolor

Answer 2

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

Aegis

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. – Reproachful

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. – Song

@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. – Perineum

Instead of class I would use id here if ul is unique. If not, stay with class. – Louise

Answer 3

You need to use list-style: none;

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

Teflon

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

Answer 4

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

Emmyemmye

Works, but only for IE8 – Debt

It's unnecessary to put list-style-type: none; on both the ul and the li. You can just do one. – Vasoconstrictor

Answer 5

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>

Laplace

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. – Sirkin

Answer 6

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>

Bassarisk

Answer 7

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

Enrichetta

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>. – Song

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. – Bernadinebernadotte

Answer 8

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

li {
    display: block;
}

Taco

Technical note: this works because it overrides the default display value of <li>, which is display: list-item;. – Vasoconstrictor

Answer 9

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;

Jesselyn

Answer 10

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

Wulfila

Answer 11

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>

2. ::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>

Caesura

Answer 12

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>

Hispanicize

Bootstrap is already covered in another answer. – Vasoconstrictor

className is only valid in ReactJS. – Untimely

Answer 13

ul{list-style-type:none;}

Just set the style of unordered list is none.

Hisakohisbe

Is there something new in this answer that wasn't already said? – Shanney

Answer 14

I tried and observed:

header ul {
   margin: 0;
   padding: 0;
}

Averir

This doesn't actually remove the bullets. They just get pushed off-screen. – Vasoconstrictor

Answer 15

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

Kunz

Answer 16

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

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

Duodenitis

-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. – Levasseur