I Need An Unordered List Without Any Bullets - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs I need an unordered list without any bullets Ask Question Asked 15 years, 6 months ago Modified 1 year ago Viewed 2.5m times 2929

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?

• html
• css

Share Improve this question Follow edited Apr 21, 2019 at 19:20 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges asked Jun 22, 2009 at 13:57 praveenjayapalpraveenjayapal 38.5k3131 gold badges7474 silver badges7474 bronze badges 0 Add a comment |

16 Answers 16

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 4185

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.

Share Improve this answer Follow edited Jun 15, 2019 at 6:10 Vadim Ovchinnikov 14k77 gold badges6565 silver badges9494 bronze badges answered Jun 22, 2009 at 14:00 Paul DixonPaul Dixon 300k5454 gold badges314314 silver badges349349 bronze badges 8

• @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 Commented Sep 16, 2016 at 12:47
• 3 If you are like me and also looking for how to remove the indent, see this - stackoverflow.com/a/13939142/846727 – Kunal Commented Jan 16, 2018 at 16:48
• Nice touch on padding and margins – Evgenii Klepilin Commented Jan 27, 2020 at 11:55
• 1 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 Commented Nov 2, 2020 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 Commented Aug 19, 2021 at 11:08

| Show 3 more comments 733

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

Share Improve this answer Follow edited Apr 19, 2023 at 5:17 Alan Reed 50444 silver badges1313 bronze badges answered Jul 11, 2013 at 15:05 Scott StaffordScott Stafford 44.7k3131 gold badges133133 silver badges186186 bronze badges 4

• 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. – Jay Brunet Commented Apr 4, 2018 at 19:57
• 16 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. – Bobort Commented May 10, 2018 at 14:38
• 4 @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 Commented Oct 30, 2020 at 21:21
• 1 Instead of class I would use id here if ul is unique. If not, stay with class. – Timo Commented Jan 16, 2021 at 13:23

Add a comment | 229

You need to use list-style: none;

<ul style="list-style: none;"> <li>...</li> </ul> Share Improve this answer Follow edited Apr 15, 2020 at 20:58 johannchopin 14.8k1111 gold badges6262 silver badges118118 bronze badges answered Jun 22, 2009 at 14:00 karim79karim79 343k6767 gold badges417417 silver badges407407 bronze badges 1

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

Add a comment | 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;} Share Improve this answer Follow edited Jun 8, 2021 at 8:24 Jun Yu 42411 gold badge88 silver badges2222 bronze badges answered Dec 10, 2012 at 5:55 charliehowardcharliehoward 55744 silver badges22 bronze badges 2

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

Add a comment | 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> Share Improve this answer Follow edited Apr 21, 2019 at 19:27 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges answered Oct 8, 2013 at 8:14 Antonio OoiAntonio Ooi 1,79811 gold badge2121 silver badges3636 bronze badges 1

• 1 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 Commented Apr 19, 2022 at 9:32

Add a comment | 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>

Share Improve this answer Follow edited Sep 7, 2020 at 14:40 Adriatic 1,28711 gold badge88 silver badges3131 bronze badges answered Sep 17, 2013 at 4:52 Chris HalcrowChris Halcrow 31.8k1919 gold badges194194 silver badges228228 bronze badges Add a comment | 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

Share Improve this answer Follow edited Feb 14, 2021 at 8:47 SK-the-Learner 54355 silver badges2020 bronze badges answered Mar 23, 2018 at 1:26 ShaneBShaneB 24322 silver badges44 bronze badges 3

• 4 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>. – Bobort Commented May 10, 2018 at 14:41
• 1 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 Commented Nov 2, 2020 at 23:05
• 1 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. – ShaneB Commented Jul 4 at 19:27

Add a comment | 7

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

li { display: block; } Share Improve this answer Follow edited Jun 8, 2021 at 8:25 Jun Yu 42411 gold badge88 silver badges2222 bronze badges answered Sep 3, 2016 at 10:59 mattmatt 33755 silver badges1414 bronze badges 2

• 3 Technical note: this works because it overrides the default display value of <li>, which is display: list-item;. – mfluehr Commented Sep 19, 2019 at 15:00
• This solution also happens to instantly work with nested lists as well which I am pleasantly surprised by. – ShaneB Commented Jul 4 at 19:34

Add a comment | 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; Share Improve this answer Follow edited Dec 4, 2023 at 2:52 Samuel RIGAUD 1,70011 gold badge1717 silver badges2525 bronze badges answered Apr 23, 2019 at 14:55 Masih JahangiriMasih Jahangiri 10.8k33 gold badges5151 silver badges5454 bronze badges 1

• 1 Why isn't margin: 0 sufficient to handle all the other margin- properties? – David J. Commented May 7 at 16:05

Add a comment | 4

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; } Share Improve this answer Follow edited Jul 15, 2023 at 15:15 answered Jan 27, 2020 at 11:47 Ali_HrAli_Hr 4,61533 gold badges2828 silver badges3434 bronze badges Add a comment | 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>

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>

Share Improve this answer Follow answered Feb 13, 2021 at 10:48 m4n0m4n0 32.1k2828 gold badges8080 silver badges9494 bronze badges Add a comment | 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> Share Improve this answer Follow answered Dec 5, 2022 at 15:05 Kevin ThomasKevin Thomas 13011 silver badge88 bronze badges 2

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

Add a comment | 0 ul{list-style-type:none;}

Just set the style of unordered list is none.

Share Improve this answer Follow answered Jul 29, 2020 at 17:55 Abuhanzala RehanansariAbuhanzala Rehanansari 9433 bronze badges 1

• 1 Is there something new in this answer that wasn't already said? – Vega Commented Jun 23, 2022 at 15:13

Add a comment | -1

I tried and observed:

header ul { margin: 0; padding: 0; } Share Improve this answer Follow edited Apr 21, 2019 at 19:33 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges answered Jul 24, 2018 at 6:26 Dadhich SouravDadhich Sourav 28966 silver badges2020 bronze badges 1

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

Add a comment | -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> Share Improve this answer Follow answered Apr 26, 2018 at 4:16 Oracular ManOracular Man 1,0601111 silver badges1515 bronze badges 0 Add a comment | -8

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.

Share Improve this answer Follow edited Apr 21, 2019 at 19:25 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges answered Mar 15, 2013 at 10:48 PhilPhil 99 1

• 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 Commented Mar 15, 2013 at 10:59

Add a comment | Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged

• html
• css

or ask your own question.

• The Overflow Blog
• “I wanted to play with computers”: a chat with a new Stack Overflow engineer
• Why do developers love clean code but hate writing documentation?
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

175 Removing black dots from li and ul 9 How do I remove the numbers in an HTML ordered list ('ol')? 4 Remove dots from list in CSS 0 Remove bullets from <ul>? 1 list style is not changing. still displaying the dot at the beginning 2 Remove Bullets from menu in wordpress 0 List-style-type: none does not work in the removal of bullets(dots) attached with items in the navigation bar 1 The marker aint getting removed in the anchor tag after setting things up also -1 Why are black dots in my nav? (HTML/CSS) 0 bullet points from <ul> See more linked questions

Related

55 How to dispay unordered list inline with bullets? 1 HTML Unordered List CSS 12 How to make a HTML list appear without the bullets signs using CSS only? 4 css - unordered list with no hard returns 0 CSS in an unordered (bulleted) list 52 Removing "bullets" from unordered list <ul> 0 Unordered list with words instead of bullet? 2 Bullet-like list without list 0 Html unordered list, problems with bullet points 0 How to have a list with bullets except first item

Hot Network Questions

• Why were my lead-acid batteries destroyed after operating them in parallel?
• How to Speed Up the Summation of a Sequence？
• Shakespeare and his syntax: "we hunt not, we"
• Do accidentals have other meanings, or is their usage in this hymn all wrong?
• Inventor builds "flying doughnut" time machine
• Why is the spectrum of the Laplacian on the torus discrete?
• What explains the definition of true and false in untyped lambda calculus?
• Why not Poisson distribution?
• Dehn-twist on punctured 3-manifold
• Čech simplicial complex contractible
• What would be the legal status of Jean Valjean and Cosette in the present day?
• What happens to miner's fees when a Bitcoin transaction is rejected?
• Proof change of variables for multivariate PDF
• Can X become dhimmis?
• Animated series begin 2000s or just before with samurai and evil twin
• Explicit zero free regions for the Riemann zeta function
• How can quantum mechanics so easily explain atomic transitions?
• 2010s-era Analog story referring to something like the "bouba/kiki" effect
• What does negative or minus symbol denote in a component datasheet?
• Is "Bich" really Latin for "generosity"?
• Why doesn't a metal disk expand in all directions when heated?
• Is there an English equivalent of Arabic "gowatra" - performing a task with none of the necessary training?
• How can I cover fountain pen ink for wall paint?
• is it necessary to use `\fp_eval:n`?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html