Search code examples
cssreact-bootstrap

Route bootstrap navbar items without changing text color

I am a beginner to bootstrap and I got stuck at a problem. I want to route the navbar links to another components on react.js but When I do this the text color turns blue. Is there any method to route any element without changing the bootstrap predefined css. Here is my screenshots.Before routing

After routing

Solution

  • CSS Solution also for React

    1. Add className/class in the Link(React Router) tag only. (Most Important Part!! Add ClassName in Link tag not any other.)
    2. Add text-decoration: none in the css file.

    Nav.js

      <Link to="/" className="link" >
    Get Started
  </Link>

    Nav.css

    .link {
   text-decoration: none;
}