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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 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" > w3wiki </ 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:
How to Remove Bullets from an Unordered List using Bootstrap 5 ?
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:
Table of Content
- Remove Bullets from an Unordered List using list-unstyled Class
- Remove Bullets from an Unordered List using list-inline Class
We will understand the above methods with the help of suitable illustrations.