React Bootstrap Navbar Collapse Not Showing the Links On Default

Question

So I'm trying to use react bootstrap by copy pasting the exact code from the website, however even on default where the screen width is more than 992px (I'm using expand lg) the links just doesn't show. And when the screen is less than 992px, the menu shows and the links shows for a second then just disappear. I have make sure to import bootstrap to main.jsx, but it just doesn't show. This is just weird because default the text just doesn't show but I tried using inspect and it is there, but I just can see it, like it's not displaying?? How do I get it to show? I'm new to using react bootstrap.

NavbarCode

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function BasicExample() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default BasicExample;

Main.jsx

import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

sekrupman · Accepted Answer · 2025-08-12 07:01:14Z

1

React Bootstrap's default text colors are relying on Bootstrap's theme variables. .bg-body-tertiary bg are too light for the text color

You can replace className="bg-body-tertiary" with bg="light" and data-bs-theme="light" so bootstrap applies dark text

<Navbar expand="lg" bg="light" data-bs-theme="light">

If you want dark background + light text, use bg="dark" and data-bs-theme="dark"

If you must keep .bg-body-tertiary you can force the text color manually in your CSS like this

.navbar-nav .nav-link {
  color: black !important;
}

if all these it still invisible, in your index.css maybe are overriding bootstrap color

answered Aug 12 at 7:01

sekrupman

1306 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

evriel Aug 12 at 8:08

I have tried and it still doesn't show, I don't think it's a text color problem, because even when I hover over the area of link, it's unclickable, usually if it's a link the pointer will change, this one is like there's nothing there at all.

sekrupman Aug 12 at 10:45

comment //import './index.css' in main.jsx if it works, something in your index.css may overriding bootstrap

Christian FAGNIDI · Accepted Answer · 2025-09-13 03:18:52Z

0

I think if you remove the BrowserRouter Tags it should work nice. This one is to be used with routes but you are not using routes.

answered Sep 13 at 3:18

Christian FAGNIDI

114 bronze badges

Collectives™ on Stack Overflow

React Bootstrap Navbar Collapse Not Showing the Links On Default

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related