Remove bullets on menu items of Bootstrap navbar

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>

Solution 1

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

list-style-type: none;

Solution 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

Solution 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 😉

Solution 4

Add navbar-nav dropdown to the class

Solution 5

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

View more solutions

Comments

[Mavelo]

Indicated this was not for the OP issue. Added because I ended up here for a very similar issue. If you're going to downvote, provide an explanation.

[Bob]

It's not clear whether this is a workaround or a definitive, necessary fix for bootstrap. It seems to me that this is probably an indicator of an issues with one's bootstrap setup.