By Abdul Rehman
React bootstrap is a very handy and popular framework for using the bootstrap in React.js applications. Today we are going to create a react-bootstrap navbar example. In this example I will show you from a simplest navbar to a little bit complex one. So grab your keyboards and let’s get started.
First thing first, we need to install react-bootstrap plugin along side with bootstrap in our react project. Assuming you already cloned a basic react template and you are ready to use your react.js project. So just open up the terminal and after navigating to project directory hit following command to install the required plugins.
npm install react-bootstrap bootstrap
Once you are done installing the bootstrap and react-bootstrap plugin, you need to import bootstrap in your App.js file. This will make sure that you may use the bootstrap all along your react application. So add the following import line.
<strong>import</strong> 'bootstrap/dist/css/bootstrap.min.css';
Code language: HTML, XML (xml)
Now let’s create our Navbar component which we will import later in our app. For this, you need to create a new file naming Navbar1.js. you may name any other which suits you best. We are using function components which will help easy component management. Now let’s write our Navbar code.
import React from "react";
import { Navbar, Nav, Form, FormControl, Button } from "react-bootstrap";
export default function Navbar1() {
return (
<Navbar bg="light" expand="md">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
Code language: JavaScript (javascript)
Most of the code for the navbar is taken from the documentation of react-bootstrap. It is very similar to the bootstrap code of the Navbar.
You can import that navbar in your app.js file like below
import React from "react";
import "./style.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar1 from "./Navbar1";
export default function App() {
return (
<div>
<Navbar1 />
<h1>React Bootstrap Navbar</h1>
<p>
This is a quick demonstration of react-Bootstrap usage and specially the
Navbar
</p>
</div>
);
}
Code language: JavaScript (javascript)
If you want to see the real demo here is the link for stackblitz
The first one is the expand=”md” attribute in the main <Navbar> tag. This will collapse your Navbar in screens lower then the medium screens. Next Thing to notice is the use of <Navbar.Collapse/> Tag, Which will collapse all your navbar content placed under this tag. Nav tag is where we place our actual navigations, and we the form control is outside this nav area so that it this will be top right.
We can also place form inside our navigation bar easily. Let’s see how to do this by adding a inline form just like below.
<Form inline>
<FormControl type="text" placeholder="Search" className=" mr-sm-2" />
<Button type="submit">Submit</Button>
</Form>
Code language: HTML, XML (xml)
Here is the complete code with in bound xs screen demo
20 November 2022
13 November 2022
07 September 2022
27 July 2022
28 February 2022
FYP Solutions Powered By Impressive Business WordPress Theme