React bootstrap navbar example; In this tutorial, i will show you step by step on how to add bootstrap navbar in react apps.
A 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
- How To Install React App On Windows 10
- React Axios – Make HTTP GET Requests Example
- React Axios – Make HTTP POST Requests Example
- React Get Form Values On Submit Tutorial
- React Tutorial – How To Use Font Awesome 5 in React
- React 17 Axios File Upload Example
- React js Get Multiple Checkbox Value On Submit
- How to Get Current Date and Time in React Apps
- React 17 Hide Show Toggle Tutorial
- React Bootstrap Modal – Implement Bootstrap Modal Ex
- React Image Upload With Preview Tutorial
- React Select Dropdown With Bootstrap Example
- React Custom Email Validation Tutorial