I need an unordered list without any bullets

Asked 2023-09-20 20:23:21 View 954,777

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?

Answers

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.

Answered   2023-09-20 20:23:21

  • @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) - anyone
  • If you are like me and also looking for how to remove the indent, see this - stackoverflow.com/a/13939142/846727 - anyone
  • Nice touch on padding and margins - anyone
  • 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'. - anyone
  • Bonus: you might need to add padding-inline-start: 0 if you want to get rid of the left margin. - anyone

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

Answered   2023-09-20 20:23:21

  • 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. - anyone
  • 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. - anyone
  • @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. - anyone
  • Instead of class I would use id here if ul is unique. If not, stay with class. - anyone

You need to use list-style: none;

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

Answered   2023-09-20 20:23:21

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

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

Answered   2023-09-20 20:23:21

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

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>

Answered   2023-09-20 20:23:21

  • 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. - anyone

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>

Answered   2023-09-20 20:23:21

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

Answered   2023-09-20 20:23:21

  • 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>. - anyone
  • 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. - anyone

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

li {
    display: block;
}

Answered   2023-09-20 20:23:21

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

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;

Answered   2023-09-20 20:23:21

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

Answered   2023-09-20 20:23:21

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>

Answered   2023-09-20 20:23:21

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   2023-09-20 20:23:21

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

Just set the style of unordered list is none.

Answered   2023-09-20 20:23:21

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

I tried and observed:

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

Answered   2023-09-20 20:23:21

  • This doesn't actually remove the bullets. They just get pushed off-screen. - anyone
 <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>

Answered   2023-09-20 20:23:21

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.

Answered   2023-09-20 20:23:21

  • -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. - anyone