Remove bullets on menu items of Bootstrap navbar - css

Question

An MVC4 Bootstrap example app shows bullet points placed way ahead of the navigation menu items on the navigation bar. separated by brand, even. The bullets appears to be related to tags CSS. Does any one have a clue about removing the bullets? The menu is displayed by navigationextension.cs
<div class="nav-collapse collapse">
#Html.Navigation()
</div>

Answer 1

You should be able to target the list item (.nav-collapse .li) with the following CSS property:
list-style-type: none;

Answer 2

you can also add class="list-unstyled" to the ul to remove all the bullets.
Removes all default list-style (bullets, left margin, etc.) styling from a or list.
https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp

Answer 3

In case others arrive with a similar issue in Edge with .dropdown-menu
/* Edge fix */
.dropdown-menu,
.dropdown-menu ul {
list-style-type:none;
}
Note: The 2nd selector covers our custom multi-column dropdowns and can be ignored 😉

Answer 4

Add navbar-nav dropdown to the class

Answer 5

Try adding style none to li class <li class="nav-item" style="list-style-type: none;" >

Answer 6

I had the same problem with bullets, plus the <li> elements where invading each other spaces. I solved it by assigning the "nav" class to the <ul> element instead of the "navbar" class I was using.
This is a sample of the working list of elements:
<ul class="nav navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
And this a sample of the list of elements showing up with bullets and overlapped:
<ul class="navbar navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
This is working at least with Bootsrap version 3.
I found the explanation for this is at the treehouse page: What's the difference between nav and navbar?

Answer 7

Simply add the "list-unstyled" to the class of the <li> element.
For example, change this:
<li class="nav-item dropdown">
to this:
<li class="nav-item dropdown list-unstyled">
Example from bootstrap docs
This has a random dot:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
The only change is I added list-unstyled and there's no dot anymore!
<li class="nav-item dropdown list-unstyled">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>