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 4025 · Accepted Answer · edited Jun 15 '19 at 06:10

4025

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

12,039
5
54
85

answered Jun 22 '09 at 14:00

Paul Dixon

287,944
49
307
343

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

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
22

Oh, how many times I have come back here for the copy/paste :) – Jonathan.Brink Jul 02 '19 at 13:50
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

score 674 · Answer 2 · edited Mar 13 '21 at 10:50

674

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

<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 Mar 13 '21 at 10:50

Giorgi Gvimradze

1,066
1
10
22

answered Jul 11 '13 at 15:05

Scott Stafford

41,977
23
122
172

4

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
10

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
1

@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 225 · Answer 3 · edited Apr 15 '20 at 20:58

225

You need to use list-style: none;

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

edited Apr 15 '20 at 20:58

johannchopin

11,813
8
41
91

answered Jun 22 '09 at 14:00

karim79

334,458
66
409
405

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 45 · Answer 4 · edited Jun 08 '21 at 08:24

45

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

fish-404

312
1
5
19

answered Dec 10 '12 at 05:55

charliehoward

477
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 18 · Answer 5 · edited Apr 21 '19 at 19:27

18

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,030
21
100
124

answered Oct 08 '13 at 08:14

Antonio Ooi

1,247
13
25

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 14 · 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 6 · Answer 7 · edited Feb 14 '21 at 08:47

6

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

459
4
15

answered Mar 23 '18 at 01:26

ShaneB

223
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 5 · Answer 8 · edited Apr 23 '19 at 21:28

5

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,030
21
100
124

answered Apr 23 '19 at 14:55

Masih Jahangiri

6,571
2
35
36

score 3 · Answer 9 · edited Jun 08 '21 at 08:25

3

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

li {
    display: block;
}

edited Jun 08 '21 at 08:25

fish-404

312
1
5
19

answered Sep 03 '16 at 10:59

matt

197
1
14

2

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 1 · Answer 10 · edited Sep 09 '20 at 05:52

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

So if you cant'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 Jul 29 '20 at 17:55

1

ul{list-style-type:none;}

Just set the style of unordered list is none.

answered Jul 29 '20 at 17:55

Abuhanzala Rehanansari

76
3

score 0 · Answer 12 · 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>

Bgil Midol · Answer 13 · 2021-05-15T18:28:34.260

0

It is possible. In a <style> element or a CSS file, making an unordered list without bullets looks like this:

ul {
  list-style-type: none;
}

Of course, you can also add ids and classes as well.

edited May 15 '21 at 18:28

answered Mar 20 '21 at 18:04

Bgil Midol

814
4
23

score 0 · Answer 14 · answered Apr 08 '21 at 16:05

0

li{
list-style: none;
}

It removes bullets from all list items.

answered Apr 08 '21 at 16:05

Rupak

419
4
13

score -1 · 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 -1 · Answer 16 · 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,030
21
100
124

answered Jul 24 '18 at 06:26

Dadhich Sourav

271
5
19

1

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

score -8 · Answer 17 · 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,030
21
100
124

answered Mar 15 '13 at 10:48

Phil

99

11

-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

17 Answers17

Bootstrap 2:

Bootstrap 3 and 4:

Linked

Related