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?

0

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

6

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> <li>...</li> </ul>

Bootstrap 3 and 4:

<ul> <li>...</li> </ul>

Bootstrap 3:

Bootstrap 4:

Bootstrap 5:

4

You need to use list-style: none;

<ul> <li>...</li> </ul>
1

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

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>Item 1</li> <li>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> <li>Item 1</li> <li>Item 2</li> </ul>

When necessary, use !important:

<style> ul.no-bullets li { list-style-type: none !important; } </style>
1

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> <li>text</li> <li>text</li> </ul>

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:

Reference here:

2

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;

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

li { display: block; }
1
ul{list-style-type:none;}

Just set the style of unordered list is none.

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

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>
li{ list-style: none; }

It removes bullets from all list items.

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. 

 <div> <ul> <li> <label> <input type="checkbox" asp-for="@Model[i].IsChecked" /> @Model[i].Title </label> </li> </ul> </div>
0

I tried and observed:

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

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.

1