ReactJS - Bootstrap - Navbar

Let us create a new React app - click here 

For more topics, click below link:


After engendering the React app, the best way to install Bootstrap is via the npm package. To install Bootstrap, navigate to the React app folder, and run the following command.

$ npm install react-bootstrap bootstrap --save

Example 1: background="dark" and variant="dark"


import React from 'react';
import { Navbar, Nav, NavDropdown, Form, Button, FormControl } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {
render() {
return (
<div><Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="https://www.knowledgefactory.net/">
                                       Knowledgefactory</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="https://www.knowledgefactory.net/">Home
                                                        </Nav.Link>
<Nav.Link href="https://www.knowledgefactory.net
                           /p/knowledefactory-topics.html">SpringBoot</Nav.Link>
<NavDropdown title="Web Development" id="basic-nav-dropdown">
<NavDropdown.Item href="https://www.knowledgefactory.net
                              /p/reactjs-tutorial.html">ReactJS</NavDropdown.Item>
<NavDropdown.Item href="https://www.knowledgefactory.net
                             /p/react-native.html">React Native</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="https://www.knowledgefactory.net
                              /p/node-js.html">NodeJS</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className=
                                                        "mr-sm-2" />
<Button variant="outline-primary">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>

</div>
);
}

}
export default App;

Example 2: background="light" and variant="light"


import React from 'react';
import { Navbar, Nav, NavDropdown, Form, Button, FormControl } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {
render() {
return (
<div><Navbar bg="light" variant="light" expand="lg">
<Navbar.Brand href="https://www.knowledgefactory.net/">
                         Knowledgefactory</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="https://www.knowledgefactory.net/">Home
                                                                   </Nav.Link>
<Nav.Link href="https://www.knowledgefactory.net/p/
                               knowledefactory-topics.html">SpringBoot</Nav.Link>
<NavDropdown title="Web Development" id="basic-nav-dropdown">
<NavDropdown.Item href="https://www.knowledgefactory.net
                              /p/reactjs-tutorial.html">ReactJS</NavDropdown.Item>
<NavDropdown.Item href="https://www.knowledgefactory.net
                                /p/react-native.html">React Native</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="https://www.knowledgefactory.net
                                       /p/node-js.html">NodeJS</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className=
                                                          "mr-sm-2" />
<Button variant="outline-primary">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>

</div>
);
}

}
export default App;

Example 3: background="primary" and variant="dark"


import React from 'react';
import { Navbar, Nav, NavDropdown, Form, Button, FormControl } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {
render() {
return (
<div><Navbar bg="primary" variant="dark" expand="lg">
<Navbar.Brand href="https://www.knowledgefactory.net/">
                                Knowledgefactory</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="https://www.knowledgefactory.net/">Home
                                                </Nav.Link>
<Nav.Link href="https://www.knowledgefactory.net/p/
                              knowledefactory-topics.html">SpringBoot</Nav.Link>
<NavDropdown title="Web Development" id="basic-nav-dropdown">
<NavDropdown.Item href="https://www.knowledgefactory.net
                               /p/reactjs-tutorial.html">ReactJS</NavDropdown.Item>
<NavDropdown.Item href="https://www.knowledgefactory.net
                                /p/react-native.html">React Native</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="https://www.knowledgefactory.net
                                   /p/node-js.html">NodeJS</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className=
                                                 "mr-sm-2" />
<Button variant="outline-light">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>

</div>
);
}

}
export default App;

CRUD

Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Spring Boot + Apache Commons Export Data to CSV Example