Skip to content

Remove bullets from ul CSS | unordered list without any bullets Example

  • by

Use list-style-type:none property to Remove bullets from UL CSS in HTML. You have to use the style attribute as inline CSS. But the usage of style attribute overrides any style set globally.

Example of the unordered list without any bullets

Here is an example of remove bullets from ul lists by setting the CSS list-style-type property to none. As an output, the bullets disappear from the list.

<!DOCTYPE html>
<html>
<body>

    <h2>Unordered List without Bullets</h2>

    <ul style="list-style-type:none;">
      <li>Apple</li>
      <li>Mango</li>
      <li>Orange</li>
  </ul>  

</body>
</html>

Output:.

remove unordered list without any bullets

Remove default margin and padding from UL tag

An HTML list also has default margin and padding. You can remove this as well, add margin:0 and padding:0 to <ul>:

<ul style="list-style-type:none; margin: 0; padding: 0;">

Use can use it as internal or external CSS.

<!DOCTYPE html>
<html>
<body>

    <h2>Unordered List without Bullets</h2>

    <ul style="list-style-type:none; margin: 0; padding: 0;">
      <li>Apple</li>
      <li>Mango</li>
      <li>Orange</li>
  </ul>  

</body>
</html>

Do comment if you know about more on this topic or have any question.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading