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?

score 4136 · Accepted Answer · edited Jun 15 '19 at 06:10

4136

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.

edited Jun 15 '19 at 06:10

Vadim Ovchinnikov

13,327
5
62
90

answered Jun 22 '09 at 14:00

Paul Dixon

295,876
54
310
348

@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) – David Balažic Sep 16 '16 at 12:47
3

If you are like me and also looking for how to remove the indent, see this - https://stackoverflow.com/a/13939142/846727 – Kunal Jan 16 '18 at 16:48
Nice touch on padding and margins – Evgenii Klepilin Jan 27 '20 at 11:55
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'. – Cagy79 Nov 02 '20 at 23:08
Bonus: you might need to add `padding-inline-start: 0` if you want to get rid of the left margin. – Charming Robot Aug 19 '21 at 11:08
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! – Andy Jul 05 '22 at 14:10
In JS it is `ul.style.listStyleType = "none"` – Timo Aug 02 '22 at 11:37
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; } – Mike Oliver Nov 27 '22 at 06:13

score 714 · Answer 2 · edited Apr 19 '23 at 05:17

714

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

edited Apr 19 '23 at 05:17

Alan Reed

470
4
11

answered Jul 11 '13 at 15:05

Scott Stafford

43,764
28
129
177

5

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. – PJ Brunet Apr 04 '18 at 19:57
13

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. https://trends.builtwith.com/docinfo/Twitter-Bootstrap A quick Google search reveals that Bootstrap is consistently placed in the "most popular CSS frameworks" category. – Bobort May 10 '18 at 14:38
3

@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. – inmydelorean Oct 30 '20 at 21:21
Instead of class I would use id here if ul is unique. If not, stay with class. – Timo Jan 16 '21 at 13:23

score 227 · Answer 3 · edited Apr 15 '20 at 20:58

227

You need to use list-style: none;

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

edited Apr 15 '20 at 20:58

johannchopin

13,720
10
55
101

answered Jun 22 '09 at 14:00

karim79

339,989
67
413
406

7

Be aware that inline css overrules css in files. Depending on the application/development practices it can be really annoying. – Mark Baijens Feb 15 '18 at 16:35

score 51 · Answer 4 · edited Jun 08 '21 at 08:24

51

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

edited Jun 08 '21 at 08:24

Jun Yu

375
1
5
21

answered Dec 10 '12 at 05:55

charliehoward

547
4
2

Works, but only for IE8 – Underverse May 21 '14 at 01:53
It's unnecessary to put `list-style-type: none;` on both the `ul` and the `li`. You can just do one. – mfluehr Sep 19 '19 at 14:46

score 21 · Answer 5 · edited Apr 21 '19 at 19:27

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>

edited Apr 21 '19 at 19:27

Peter Mortensen

30,738
21
105
131

answered Oct 08 '13 at 08:14

Antonio Ooi

1,601
1
18
32

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. – Mahdyar Apr 19 '22 at 09:32

score 15 · Answer 6 · edited Sep 07 '20 at 14:40

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>

score 8 · Answer 7 · edited Feb 14 '21 at 08:47

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

edited Feb 14 '21 at 08:47

SK-the-Learner

523
5
18

answered Mar 23 '18 at 01:26

ShaneB

243
2
4

2

If you're going to use this method, use the semantically proper way of entering a term to be defined in `
` and the definition of that term in `
`.
– Bobort May 10 '18 at 14:41
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. – Cagy79 Nov 02 '20 at 23:05

score 7 · Answer 8 · edited Jun 08 '21 at 08:25

7

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

li {
    display: block;
}

edited Jun 08 '21 at 08:25

Jun Yu

375
1
5
21

answered Sep 03 '16 at 10:59

matt

337
4
14

3

Technical note: this works because it overrides the default `display` value of `
`, which is `display: list-item;`.

mfluehr

Sep 19 '19 at 15:00

score 4 · Answer 9 · edited Apr 23 '19 at 21:28

4

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;

edited Apr 23 '19 at 21:28

Peter Mortensen

30,738
21
105
131

answered Apr 23 '19 at 14:55

Masih Jahangiri

9,489
3
45
51

Ali_Hr · Answer 10 · 2023-07-15T15:15:11.487

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

score 1 · Answer 11 · answered Feb 13 '21 at 10:48

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

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>

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

score 1 · Answer 12 · answered Dec 05 '22 at 15:05

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>

answered Dec 05 '22 at 15:05

Kevin Thomas

70
1
7

Bootstrap is already covered in another answer. – mfluehr Dec 16 '22 at 22:05
className is only valid in ReactJS. – ethry Dec 16 '22 at 23:16

score 0 · Answer 13 · answered Jul 29 '20 at 17:55

0

ul{list-style-type:none;}

Just set the style of unordered list is none.

answered Jul 29 '20 at 17:55

Abuhanzala Rehanansari

84
3

1

Is there something new in this answer that wasn't already said? – Vega Jun 23 '22 at 15:13

score -1 · Answer 14 · edited Apr 21 '19 at 19:33

-1

I tried and observed:

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

edited Apr 21 '19 at 19:33

Peter Mortensen

30,738
21
105
131

answered Jul 24 '18 at 06:26

Dadhich Sourav

289
6
19

1

This doesn't actually remove the bullets. They just get pushed off-screen. – mfluehr Sep 19 '19 at 14:49

score -2 · Answer 15 · answered Apr 26 '18 at 04:16

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

score -8 · Answer 16 · edited Apr 21 '19 at 19:25

-8

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.

edited Apr 21 '19 at 19:25

Peter Mortensen

30,738
21
105
131

answered Mar 15 '13 at 10:48

Phil

99

12

-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. – webnoob Mar 15 '13 at 10:59

I need an unordered list without any bullets

16 Answers16

Bootstrap 2:

Bootstrap 3, 4, and 5:

Linked

Related