navbar problem

[HamzaAryanSapnil]

I have copied this navbar from Bootstrap 5 bellow

first, I did copied this navbar from Bootstrap 4 when I paste it into my react my app The search bar didn't show right. it was showing with the home link about.......

then I copied the first navbar from Bootstrap 5 but I couldn't change it from dark to light or light to dark

here in the big body, I make it light from tertiary. but the whole navbar become white and the text and links were gone.

I just wanted to make my web page dark mode and then I will add a button to switch it again in light mode.
but I couldn't find any dark or light navbar on get bootstrap.....
can you help me?

[fabricio-fn]

see if the bootstrap classes are correct

light:

dark:

also check if there is any css file interfering

[fabricio-fn]

Example that might help:

dark mode:

My Site

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</div>

light mode:

My Site

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</div>

[fabricio-fn]

make sure you correctly installed bootstrap in react "npm install bootstrap"

import style in main or app import 'bootstrap/dist/css/bootstrap.min.css';

import what you use: import { Navbar, Nav, NavItem } from 'react-bootstrap';
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjS5sHQis2AAxVdpZUCHWCQDJ8QFnoECBAQAQ&url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F73170897%2Fhow-to-create-dark-light-theme-in-bootstrap-5-with-react&usg=AOvVaw21D_B_LzF8WuWU5PAtKeiZ&opi=89978449