There is a lot of variation and complexity involved in making Bootstrap Navbars, so be sure to review the documentation for more information and examples. Information on Bootstrap Navbars can be found here. The very basic concept is :

• < nav class="navbar navbar-light bg-success">
  • < a href="#" class="navbar-brand">Navbar< /a>
• < /nav>

The code bg-success is for the BACKGROUND color and navbar-light is for the TEXT color, but it should be noted that the code navbar-light is refering to a light or dark THEME. If you call for a "Light" theme you are going to get DARK text and if you call for a "Dark" theme, you are going to get LIGHT text

You can create your "nav" items by all the normal means of creating links such as using List's or straight up Anchor tags. You can also include Buttoms, Images, or Form elements into your navbar.

Bootstrap "Fluid" Navbar Example

The Home link is brighter because it is an "Active" link. The Features/Pricing links are dimmer because they are NOT "Active" links. The Disabled link is greyed out because it is a "Disabled" Link.

You can change the background color of the navbar by adding a style to the < nav class="navbar"> line, such as: < nav class="navbar" style="background-color: #9b8144;"> and REMOVING bg-dark. You can also change the color for the "Search Bar" button with the < button class="btn btn-outline-success">

Here is the code:

• - - Set Initial Navbar Container - -
• - - expand and show links below if large or greater Viewport - -
• < nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  • 
    -- Make the navbar "fluid" (use bootstrap breakpoints) --
  • < div class="container-fluid">
    • 
      -- Set the Navbar Brand (Title and/or Logo) --
    • < a class="navbar-brand" href="#">Navbar< /a>
    • 
      
    • -- add "Hamburger" icon for links when they are hidden (navbar-toggler) --
    • -- (data-bs-toggle="collapse") means the button is initially collapsed --
    • -- (data-bs-target) is the link to "which data should opened in the hamburger menu" --
    • < button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      • < span class="navbar-toggler-icon">
    • < /button>
    • 
      --set navbar-collapse as default behaviour (hides the links below if smaller than the lg defined above) --
    • -- (id="navbarNav") are the links that will show on the hamburger menu" --
    • < div class="collapse navbar-collapse" id="navbarNav">
      • 
        -- These are the actual Navbar Links --
      • < div class="navbar-nav">
        • < a class="nav-link active" href="#">Home< /a>
        • < a class="nav-link" href="#">Features< /a>
        • < a class="nav-link" href="#">Pricing< /a>
        • < a class="nav-link disabled" aria-disabled="true">Disabled< /a>
      • < /div>
      • 
        -- (d-flex) makes the form a flex item --
      • -- (ms-auto) aligns the search form to the right of the container --
      • -- mx-auto | align items to the center of the navbar --
      • -- me-auto | align items to the left of the navbar --
      • < form class="d-flex ms-auto p-1" role="search">
        • < input class="form-control me-2" type="search" placeholder="Search">
        • < button class="btn btn-outline-success" type="submit">Search< /button>
      • < /form>
    • < /div>
  • < /div>
• < /nav>