React Bootstrap Navbar Tutorial Example

React bootstrap navbar example; In this tutorial, i will show you step by step on how to add bootstrap navbar in react apps.

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

React-Bootstrap is a front-end framework that was designed keeping react in mind. Bootstrap was re-built and revamped for React, hence it is known as React-Bootstrap. 

In this Bootstrap navbar in React tutorial; i will provide create a navbar component using bootstrap navbar in react js app.

React JS 17 Bootstrap Navbar Example Tutorial

  • Step 1 – Create React App
  • Step 2 – Install Bootstrap 4
  • Step 3 – Create Bootstrap Navbar Component
  • Step 4 – Import Bootstrap Navbar Component in App.js

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install React Bootstrap

Execute the following command to install react boostrap library into your react app:

npm install bootstrap --save

npm install react-bootstrap bootstrap

Add bootstrap.min.css file in 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

Create BootstrapNavbar.js file. So, visit the src directory of your react js app and create a table component file named BootstrapNavbar.js. And add the following code into it:

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 - laratutorials.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;

The above bootstrapnavbar.js; import “import { Navbar,Nav,NavDropdown,Form,FormControl,Button } from ‘react-bootstrap'” in navbar component.

Step 4 – Add Bootstrap Navbar Component in App.js

Import BootstrapNavbar.js file in 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;

Conclusion

React bootstrap navbar example; In this tutorial, you have learned how to add bootstrap navbar in react js apps.

Recommended React Tutorials

Leave a Comment