Why the nav-link items don't turn white in this dark Bootstrap 4 Nav?-CodePudding

Why nav-link color doesn't turn white for this dark Bootstrap 4 Nav code snippet? I mean, they should work as Navbars. Shouldn't they?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<main role="main">
  <div >
    <ul >
      <a  href="#">Growing</a>
      <a  href="#">Know</a>
    </ul>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

CodePudding user response：

You are missing some of the proper semantics of Bootstrap.

Your nav should be wrapped in actual <nav> tags.
Your anchor tags should be wrapped in <li> tags.
you're not using the proper classes that usually go with the <ul> tag.

Example of proper Bootstrap nav semantics:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<main role="main">
  <nav >
    <ul >
      <li >
        <a  href="#">Growing</a>
      </li>
      <li >
        <a  href="#">Know</a>
      </li>
    </ul>
  </nav>
</main>

CodePudding user response：

Your list markup lacks list items. This is invalid HTML. Also, you don't have the required classes on the right elements. The div wrapper needs navbar, and the list needs navbar-nav.

I'd also avoid putting the row class on the navbar. It introduces negative margins that don't seem helpful here.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<main role="main">
  <div >
    <ul >
      <li ><a  href="#">Growing</a></li>
      <li ><a  href="#">Know</a></li>
    </ul>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>