Learn to create unordered list without bullets using list-style-type

0 4479

In this tutorial, I will explain the code on how to create an unordered list without bullets in HTML. In order to create an unordered list, we will be using CSS list-style-type property.

There are three different types of lists in HTML. These types are:

Ordered list
unordered list
Detail list

Use the <ul> tag to create an unordered list in HTML. This method of creating list results in lists with bullets. However, it is possible to have an unordered list without bullets.

In the sample code below, we will be displaying the procedure to remove these bullets created with <ul> tag. This will be achieved by the list-style-type property of CSS. The list-style-type property can be used to remove the default marker/bullet in a list.

We also need to remove the default margins and padding, and this can be done by assigning 0 value to margin and padding in <ul> tag.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title> Unordered List without any Bullets </title>
    <style>
     .mid
    {
     width: 30%;
margin: 0px auto;
font-family: Verdana,Geneva,sans-serif;

    }
     .mid h1
     {
      font-family: Verdana,Geneva,sans-serif;
      font-size: 17px;

     }
     ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>

    <div class="mid">
    <h1>Unordered List without any Bullets </h1>


    <ul>
      <li>Learn HTML</li>
      <li>Learn CSS</li>
      <li>Learn Javascript</li>

    </ul>

    </div>
  </body>
</html>

Execute

Output:

So, you can see that we can remove the bullets of an unordered list created by <ul> tag with the help of list-style-type property of CSS. By declaring margin and padding to 0, the bullets and default margin can be removed.

Kindly leave your comments in the below comment section in you like this tutorial. For more such useful codes, subscribe to our website.