How to Remove Bullets from an Unordered List using Bootstrap 5 ?
Last Updated :
24 Nov, 2023
In this article, we will see how we can remove those “Bullets” from an Unordered list using Bootstrap 5. An Unordered list in HTML is a type of list in which the order of the items does not matter and hence, instead of marking each item with a number (as in an ordered list), “bullets” are used to mark each item. There are several methods to be utilized to replace the Bullets from an Unordered List, among which will cover the following methods:
We will understand the above methods with the help of suitable illustrations.
Remove Bullets from an Unordered List using list-unstyled Class
The list-unstyled class is a Utility Class provided by Bootstrap 5 which is used to remove the default list-style applied to a list along with removing the margin on the left of the list items which are immediate children of the list.
Syntax
<ul class="list-unstyled">
...
</ul>
Example 1: In this example, we will see replacing the default styling for the Bullets from an Unordered List in Bootstrap 5.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>
How to Remove Bullets
from an Unordered List
using Bootstrap 5?
</title>
</head>
<body class="p-5">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h5>My GeeksforGeeks Articles</h5>
<ul class="list-unstyled">
<li>
<a href=
HTML Tutorial
</a>
</li>
<li>
<a href=
REACT Tutorial
</a>
</li>
<li>
<a href=
Bootstrap Tutorial
</a>
</li>
<li>
<a href=
NEXTJS Tutorial
</a>
</li>
</ul>
</body>
</html>
|
Output:
Remove Bullets from an Unordered List using list-inline Class
Bootstrap 5 provides a utility class, i.e., the “list-inline” which can be used to remove the bullets from an unordered list.
Syntax
<ul class="list-inline">
...
</ul>
Example 2: In this example, we will be using the list-inline Class to replace the Bullets from an Unordered List.
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<title>
How to Remove Bullets
from an Unordered List
using Bootstrap 5?
</title>
</head>
<body class="p-5">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h5>
My Favourite Movies
</h5>
<ul class="list-inline">
<li>React</li>
<li>Nodejs</li>
<li>Bootstrap</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...