By default Unordered List in HTML render bullets on webpage. To remove bullets from unordered list you can set CSS rule list-style-type: none; for ‘ul‘.
Inline Style: <ul style="list-style: none;"><li>...</li></ul>
Or
Embedded/External CSS:
1 2 3 4 5 6 | ul, li { list-style-type: none; /*margin: 0; padding: 0;*/ } |
You might also want to add margin:0; padding:0; to that, if you want to remove indentation as well. You can see in the code above that I have applied the same CSS rule to ‘li`s’ as well to make it work in IE9 too.
If you are using Twitter Bootstrap then there is already a class called ‘list-unstyled‘ in version 3 to remove the default ‘list-style‘ and left margin on list items (immediate children only). For version 2 it’s ‘unstyled‘. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!-- Version 3 --> <ul class="list-unstyled"> <li>...</li> <li>...</li> <li>...</li> <li><ul class="list-unstyled">...</ul></li> </ul> <!-- Version 2 --> <ul class="unstyled"> <li>...</li> <li>...</li> <li>...</li> <li><ul class="unstyled">...</ul></li> </ul> |
This is the basic CSS rule to hide or remove bullet points from unordered list and remove text indentation from lists.
It says list-style-type…should just be list-style