React 17 Js Tutorial- How To Add Bootstrap Navbar In A React Js App

React Bootstrap Navbar Example

In this tutorial, we will see how to add the bootstrap navbar in a React Js app. We already know that React Bootstrap is a front-end framework that was designed in respect of React.

A navigation bar is a user interface element within a webpage that contains links to other sections of the website. The navigation bar is quite a significant element of a website’s design since it allows users to quickly visit any section within the site.

Hence, we understood that the Navbar is used for navigation in a website or app. Let’s see now how to add it step by step in a React Js app using the bootstrap 4 library.

 

React Bootstrap 4 Navbar Example Tutorial

Step 1- Create React App

Step 2- Install Bootstrap 4

Step 3- Create Bootstrap Navbar Component

Step 4- Add Bootstrap Navbar Component In App.js

 

Step 1- Create React App

In this step, we will install a new React app. If you are already done with it, then jump on to the next step:

npx create-react-app my-react-app

 

Now, to run the React app, we will have to execute the following command on our terminal:

npm start

 

Step 2- Install React Bootstrap

Further, we may use Bootstrap CSS to style the layout. for which we will have to execute the following command:

Bootstrap is a free and open-source CSS framework focussed on responsive, mobile-first front-end web development.

npm install bootstrap --save

npm install react-bootstrap bootstrap

 

Here, we have to add the bootstrap.min.css file in the src/App.js file:

import React, { Component } from 'react'
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>How to Add Bootstrap Navbar in React</h2>
    </div>
  );
}
 
export default App;

 

Step 3- Create Bootstrap Navbar Component

Afterward, we need to import “import {Navbar,Nav,NavDropdown,Form,FormControl,Button } from ‘react-bootstrap’ ” in navbar component.

For creating the BootstrapNavbar.js file, we visit the src directory of your react js app and then create a table component file named BootstrapNavbar.js where we will be adding the following code:

import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
} from "react-router-dom";
import { Navbar,Nav,NavDropdown,Form,FormControl,Button } from 'react-bootstrap'
import Home from './Home';
import AboutUs from './AboutUs';
import ContactUs from './ContactUs';
class BootstrapNavbar extends React.Component{
render(){
return(
<div>
<div className="row">
<div className="col-md-12">
<Router>
<Navbar bg="dark" variant="dark" expand="lg" sticky="top">
<Navbar.Brand href="#home">React Bootstrap Navbar - Tutsmake.com</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about-us">Contact Us</Nav.Link>
<Nav.Link href="/contact-us">About Us</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>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
<br />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about-us">
<AboutUs />
</Route>
<Route path="/contact-us">
<ContactUs />
</Route>
</Switch>
</Router>
</div>
</div>
</div>
)  
}
}
export default BootstrapNavbar;

 

Step 4- Add Bootstrap Navbar Component In App.js

In the last step, we need to add the BootstrapNavbar.js file in the src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import BootstrapNavbar from './BootstrapNavbar'
function App() {  
return (  
<div className="App">  
<BootstrapNavbar />  
</div>  
);  
}  
export default App;

 

Summary

So, in this React guide, we have seen how to add the bootstrap navbar in React js app.

Thanks