Create Unordered List without Bullets using CSS

An ordered or unordered list is always visible with number or bullets respectively. These are the styles of a list on a web page set using the list-style-type property. Let us see how to create an unordered list without bullets.

Create an unordered list

An unordered list is created using the <ul> element −

<ul>
  <li>Tiger</li>
  <li>Giraffe</li>
  <li>Lion</li>
  <li>Panther</li>
  <li>Jaguar</li>
</ul>

Style the list and remove the bullets

Set the list-style-type property to none to remove the bullets from the unordered list −

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   font-size: 18px;
   font-weight: bold;
}

Example

To create an unordered list without bullets using CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         font-size: 18px;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <h1>Remove bullets from ul example</h1>
   <ul>
      <li>Tiger</li>
      <li>Giraffe</li>
      <li>Lion</li>
      <li>Panther</li>
      <li>Jaguar</li>
   </ul>
</body>
</html>

Set an image for the list in place of bullets

Set an image in place of the list-item marker bullet in a list with list-style-image. To set the image in place of a marker, use the url() for the list-style property. We have set an image of the bullet −

ul  {
  list-style: url("https://www.tutorialspoint.com/images/clipart/bullet/bullet2.gif");
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      ul  {
         list-style: url("https://www.tutorialspoint.com/images/clipart/bullet/bullet2.gif");
      }
   </style>
</head>
<body>
   <h1>Sports</h1>
   <ul>
      <li>Cricket</li>
      <li>Football</li>
      <li>Hockey</li>
   </ul>
</body>
</html>
Updated on: 2023-12-14T15:40:30+05:30

560 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements