CSS Remove Bullets From an Unordered List
Learn how to remove bullets from an unordered list using CSS
Published
- CSS Remove Bullets From an Unordered List
- Remove Bullets For A Specific List
- All possible list-item markers
CSS Remove Bullets From an Unordered List
Removing bullets from an unordered list is easy. We can use list-style-type: none; to remove bullets.
Unordered list default value is disc. You can update with Javascript as well. You can use object.style.listStyleType="square"
Syntax
ul {
list-style-type: none;
}
If you don’t to apply this to all unordered list then using use a class or Id to apply this to a particular unordered list.
Remove Bullets For A Specific List
.main-points {
list-style-type: none;
}
Please note, list-style is the shorthand to set list-style-type, list-style-position and list-style-image properties all in one declaration. so you can also use list-style:none instead of list-style-type:none
Example
<style>
ul {
list-style-type: none;
}
.points1 {
list-style-type: circle;
}
.points2 {
list-style-type: disc;
padding:0;
margin:0;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="points1">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="points2">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
By adding padding: 0 and margin: 0 you can remove indentation as well.
All possible list-item markers
list-style-type: none;
list-style-type: inherit;
list-style-type: circle;
list-style-type: disc;
list-style-type: square;
list-style-type: armenian;
list-style-type: cjk-ideographic;
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: georgian;
list-style-type: hebrew;
list-style-type: hiragana;
list-style-type: hiragana-iroha;
list-style-type: katakana;
list-style-type: katakana-iroha;
list-style-type: lower-alpha;
list-style-type: lower-greek;
list-style-type: lower-latin;
list-style-type: lower-roman;
list-style-type: upper-alpha;
list-style-type: upper-greek;
list-style-type: upper-latin;
list-style-type: upper-roman;