by Sai gowtham

How to remove bullets from a un-ordered list (ul) in Html

In this tutorial, we will learn how to display the unordered list items without any bullets or dots.

Normally, if we create an unordered list (<ul>) we will see bullets on the left-side of each list-item(<li>) because user-agent is applying its default css rules.

<ul>
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
</ul>
  • First item
  • Second item
  • Third item

Removing Bullets

To remove the bullets from an unordered list we need to use the css list-style-type property with value none for a <ul> element.

ul {
   list-style-type: none;
}

Similarly, we can also use list-style property.

ul {
  list-style: none;
}

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course