First things first, you will need to have and open your React app. To start off you have to add react-bootstrap to your package.json file by running:
Make sure to check it has installed in your package.json file.
Once Bootstrap has installed make sure to import it at the top of your index.js file.
Then you need to import the stylesheet to your index.html file. My suggestion would be to import it just above the <title> tag.
Now by navigating the React-Bootstrap documentation by going to Components and scrolling down to NavBar, the code necessary is supplied for you.
If you copy paste this code in to your App.js file inside the render function inside the <div> tag then you’re almost there!
This will throw an error which has a fairly simple but slightly time consuming fix. To start off there is one more thing you need to import at the top of your App.js file.
The last step is that you need to add “ReactBootStrap.” in front of every instance of “Navbar” or “Nav.” There may be a few things in the Navbar that you wish to comment out until you have implemented that function.
You’re able to put links in your Navbar to navigate to certain components. Like shown above! The very top line of code allows you to manipulate the Navbar’s responsiveness through the “expand=” property, as well as customise the colour through playing with the “variant=” and “bg=” properties.