I need an unordered list without any bullets
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?
Accepted Answer
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.
Read more… Read less…
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
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;}
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 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>