Incorporating Bootstrap into a React App: The Nav Bar

Bootstrap is a beautiful and easy-to-use framework that has a built-in mobile-first front-end style. Incorporating this into a React app is a simple way to clean up a website or to make the site mobile responsive. In this article, we will look at how to set up react-bootstrap on your app, and how to use the Navbar and Nav components built into react-bootstrap.

There are two easy ways to install react-bootstrap depending on the project you are using. I found it easiest to install using npm with the command:

npm install react-bootstrap bootstrap

You can also import the CSS styles by adding the CDN to your HTML file. Place the following bolded code right above the </head> tag, so it should look something like this:

<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
</head>

Check out the link here for more info on how to install react-bootstrap: https://react-bootstrap.github.io/getting-started/introduction/

Now that we have our project prepped and ready to go, we can start adding components to our project. The easiest in my opinion to add is the Navbar component, so let’s take a look!!

Usually, I will add a Nav Bar in a React component that will look something like this:

<nav>
   <div>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact Us</Link>
   </div>
</nav>

And it will display something like this:

By default, not a very pretty Nav Bar. By using the react-bootstrap Navbar component, we can transform the same Nav Bar to look like this:

<Navbar collapseOnSelect expand="lg" bg="light" variant="light">      
   <Navbar.Toggle/>
     <Navbar.Collapse >
      <Nav>          
          <Nav.Link href="/home">Home</Nav.Link>
          <Nav.Link href="/about">About the Company</Nav.Link>         
          <Nav.Link href="/contact">Contact Us</Nav.Link>
      </Nav>
    </Navbar.Collapse>
</Navbar>

And it will display something like:

For Desktop:

For Mobile:

Let’s break down what’s happening here in the react-bootstrap components:

1. First, we add our import statements to the top of our code. I usually start by importing the Navbar and Nav components and add other options as I need them to the import statement

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'

2. Next, we want to wrap everything in the <Navbar> tags. This is where we can define the style we want to use. In our example, we added a few props to help us style, expand, bg, and variant.

<Navbar collapseOnSelect expand=”lg” bg=”light” variant=”light”>

• expand sets the limit, below which, the Navbar will collapse. When true the Navbar will always be expanded regardless of screen size. In our example it will collapse on a large screen
• bg is a convenient prop for adding utility classes since they are so commonly used here. light and dark are common choices but any bg-* class is supported, including any custom ones you might define. We used light to give us the white Nav Bar
• variant is the general visual variant of the Navbar. Use in combination with the bg prop, background-color utilities, or your own background styles. We are using the light variant but you can also use dark

3. The next piece we need to add is the ability for the Navbar to toggle from a full bar on a web browser to a collapsed NavBar on a mobile device. Right Before we start our <Nav> component, we want to add:

<Navbar.Toggle/>

4. The final piece to make this work, is wrapping our <Nav> components inside a component to indicate what exactly will collapse when toggled. Right below the Toggle, we need both an opening and a closing tag of:

<Navbar.Collapse >
</Navbar.Collapse>

Our <Nav> components will go inside these tags

5. Once our styling is set, we can start to add out Nav links. They are built out the same way as the <Link/> component inside react-router-dom we start by wrapping the entire Navigation piece with a <Nav/> tag, and then creating each route with a <Nav.Link> tag like this:

<Nav> 
   <Nav.Link href="/home">Home</Nav.Link> 
   <Nav.Link href="/about">About</Nav.Link>
   <Nav.Link href="/contact">Contact Us</Nav.Link>
</Nav>

The <Nav.Link> tags specify where exactly it is routing to by using href=“/”. The routes will still need to be initially defined using react-router-dom so the Nav Bar will know which components to load when it reaches that destination. Anything Between the opening and closing tags will appear as the text for the link.

And that’s it! You now have a styled, mobile responsive Nav Bar using React and react-bootstrap!

There are far more options for styling than what is covered in this article.

If you would like to read more about all the options the Navbar has, check out this link: https://react-bootstrap.github.io/components/navbar/

For more information on the Nav component’s options, check out this link: https://react-bootstrap.github.io/components/navs/