html - I need an unordered list without any bullets

ID : 237

viewed : 154

Tags : htmlcsshtml

Top 5 Answer for html - I need an unordered list without any bullets

vote vote


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.

vote vote


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>

Bootstrap 3 and 4:

<ul class="list-unstyled">    <li>...</li> </ul> 

Bootstrap 3:

Bootstrap 4:

Bootstrap 5:

vote vote


You need to use list-style: none;

<ul style="list-style: none;">     <li>...</li> </ul> 
vote vote


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


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> li {     list-style-type: none; } </style>  <ul class="no-bullets">     <li>Item 1</li>     <li>Item 2</li> </ul> 

When necessary, use !important:

<style> li {     list-style-type: none !important; } </style> 

Top 3 video Explaining html - I need an unordered list without any bullets