How to create an unordered list without bullets

Use the list-style-type CSS property to create an unordered list without bullets.

By default, unordered lists (<ul>) show a bullet for each item in the list.

However, sometimes you may wish to utilize a <ul> HTML element for purposes other than to have a bulleted list.

In such situations, it can be useful to style the <ul> using CSS such that the bullets are removed and no longer show up.

Creating a <ul> without bullets

In this example, you have a <ul> on a HTML page, and would like to remove its bullets:

<html>
	<body>
		<ul class="my-list">
				<li>Home</li>
				<li>Products</li>
				<li>Blog</li>
				<li>Contact</li>
		</ul>
	</body>
</html>

Here, the list-style-type CSS property is used to perform the removal:

.my-list {
	list-style-type: none;
}

In Bootstrap, you can use the list-unstyled CSS class to remove bullets from an unordered list:

<html>
	<body>
		<ul class="list-unstyled">
				<li>Home</li>
				<li>Products</li>
				<li>Blog</li>
				<li>Contact</li>
		</ul>
	</body>
</html>

Bootstrap has the list-unstyled class already predefined, so you do not have to write the CSS code yourself.

That’s all there is to it! The bullets are now removed from the unordered list.