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.
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
You need to use list-style: none;
<ul style="list-style: none;">
<li>...</li>
</ul>
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;}
list-style-type: none;
on both the ul
and the li
. You can just do one.
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>
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; }
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:
Example here: https://jsfiddle.net/zumcmvma/2/
Reference here: https://www.w3schools.com/tags/tag_dl.asp
<dt>
and the definition of that term in <dd>
.
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;
}
display
value of <li>
, which is display: list-item;
.
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.
Transparent ::marker
ul li::marker {
color: transparent;
}
ul li::marker { color: transparent; } ul { padding-inline-start: 10px; /* Just to reset the browser initial padding */ }
::marker empty content
ul li::marker {
content: "";
}
ul li::marker { content: ""; }
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: ""; }
<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>
I tried and observed:
header ul {
margin: 0;
padding: 0;
}
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.
Success story sharing