Remove bullets from list items

Introduction: In this lesson, we will learn how to remove bullets from the order and un order list items by using CSS.

So lets take an example:

Remove bullets from list items
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Remove bullets from ul or ol</title>
    </head>
    <body>
      <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Foo Bar</li>
      </ul>
    </body>
</html>

Result:

  • Foo
  • Bar
  • Foo Bar

How to remove bullets using inline CSS?

<ul style="list-style-type: none;">
	<li>Foo</li>
	<li>Bar</li>
	<li>Foo Bar</li>
</ul>

So we can use list-style-type to none to remove the bullet from HTML ul or ol list items.

Or we can set <li> display to block to hide the bullets point.

ul li{
   display: block;
}

How to remove bullets from ul in bootstrap?

In Bootstrap 3, 4 and Bootstrap 5, we can use list-unstyled class. But in case of older Bootstrap i.e. Bootstrap 2, we have to use unstyled.

<ul class="list-unstyled">
	<li>Foo</li>
	<li>Bar</li>
	<li>Foo Bar</li>
</ul>

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment