How to Create an Unordered List without any Bullets in HTML
Topic: HTML / CSSPrev|Next
Answer: Use the CSS list-style-type
Property
You can simply use the CSS list-style-type
property with none
value to remove the bullets from the unordered list (i.e. the <ul>
element). Additionally, to remove the default left padding from the list you can use set the padding-left: 0;
on it. Here's an example:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Bullets from List using CSS</title>
<style>
ul{
list-style-type: none;
padding-left: 0;
}
</style>
</head>
<body>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</body>
</html>
If you're using the Bootstrap framework you can simply apply the class .list-unstyled
on the <ul>
or <ol>
element. It removes the bullets (or list markers) as well as the left padding from the list items which are immediate children of the <ul>
or <ol>
element.
Related FAQ
Here are some more FAQ related to this topic: