ReactJS - Bootstrap - Navbar

Bootstrap become the most popular CSS framework. 

Let us create a new React app https://www.knowledgefactory.net/2020/12/react-js-setup-installation-and-first_27.html

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;

More...

Comments