Introduction: In this lesson, we will learn how to remove bullets from the order and un-order list items by using CSS.
So let’s take an example:
<!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 the list-unstyled class. But in the 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>
