Creating Responsive Navbar using React-Bootstrap
Tags: react, bootstrap, reacthooks, javascript
Published: 2022-01-17 07:24:04


React is a JavaScript library for creating user interfaces based on UI components . And, Bootstrap is a CSS framework for creating responsive applications. Here, in this blog post we will discuss how to use Bootstrap in our React applications . 

From the official guide

> React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. 


First, let us create a new react project using the command:

`npx create-react-app react_bootstrap_navbar
`

Then add few new components to the project. We will create a new folder called components and add three components: Home, About, Contact .


![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgkfquioo8d3utxr0l1a.png) 

Now, we will be adding some content inside those three components . 

```javascript
const Home = () => {
    return (
        <h1>Home Page</h1>
    );
}
 
export default Home;
```

Similarly add some texts to About and Contact components . 

In App.js file, let's import all three components.

``` javascript
function App() {
  return (
    <div className="App">
        <Home />
        <About />
        <Contact />
    </div>
  );
}
```

In order to install the React Bootstrap npm package we can simply go to terminal and use the command :

`npm install react-bootstrap bootstrap@5.1.3
`
After that we need to import bootstrap.min.css file in index.js or App.js file . 

`import 'bootstrap/dist/css/bootstrap.min.css';
`

We are now ready to use all the features of React Bootstrap .

![Happy GIF](https://media.giphy.com/media/hZj44bR9FVI3K/giphy.gif
) 


Let us create a new component called Navigationbar.js and add the following code which will be responsible for creating our navbar .
 



![navbar component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp5sdbuth13krqiv3o96.png))

Let's understand some of the components and props from the above code:

- Navbar component wraps the entire component . 
- expand prop allows us to collapse the navbar at given breakpoint and we also need to add collapseOnSelect prop . 
- Navbar.Toggle and Navbar.Collapse helps to get the mobile friendly navbar . 
- collapseOnSelect prop works only if we add eventKey prop for NavLink item .


Now, we will install React Router library for building functioning navigation routes . 

`npm i react-router-dom@5.3.0`

In App.js file, let us import BrowserRouter  (aliased as Router) , Route and Switch from React Router . 

`import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';`

Moving on to our App.js file, let's add corresponding routes to the components.

```javascript
function App() {
  return (
    <div className="App">
        <Router>
            <Navigationbar />
            <Switch>
                <Route exact path='/' component={Home}/>
                <Route path='/about' component={About}/>
                <Route path='/about' component={Contact}/>
            </Switch>
        </Router>
    </div>
  );
}
```

Here we are using Switch component which will render our components only when path will be matched . 

Here's how our navbar looks on the desktop screen : 


![responsive navbar react and bootstrap](https://media.giphy.com/media/DDqxQ2I7UkreVqYSAH/giphy.gif)


This is how the navbar looks on small screen devices : 

![responsive navbar react and bootstrap small devices](https://media.giphy.com/media/4LN41BuvYelVXF9Jgx/giphy.gif)

You can find the demo and source code [here](https://codesandbox.io/s/react-bootstrap-navbar-0c6ko)

## Conclusion:

In this  blog post we saw how to create responsive navigation bar using React-Bootstrap front end framework . I hope you enjoyed reading this blog post. Feel free to share your thoughts below. You can find me on [Twitter](https://twitter.com/saam_codes) for daily content regarding Web development. 

Thanks for reading. Happy Coding !