Navbar: Styling React with Bootstrap
“Navbar” is another important component in most React pages. Let’s learn more about <Navbar> from react-bootstrap
This article is a continuation of the previous article. We are using the same project we started there and did the initial setup of the project.
final code for Navbar at github/ranyelhousieny/react-with-bootstrap/src/components/MyNavbar.js
The Navbar component (as any other react component) consists of an opening tag <Navbar> and a closing tag </Navabr>
Between those two tags come all the items on the Navbar as we will see
<Navbar.Brand>
Usually, you see the Navbar on the top of the page with navigation items, such as home, cart … It also includes a Brand, which is the Brand of the owner of the page.
As you can see in the image, The Black area is the Navbar. It has a Brand and two links, Link1, and Link2. Let’s start with a simple Navbar with a Brand
First, you import Navbar
To create a Brand, you use <Navbar.Brand> API inside the <Navbar> component, as follows. In between the tags you put your Brand name. In this case, I just named it “Brand”
It will show on the browser as follows
Background color
Not the best view, I know. Let’s change the background color to light. You change the background color using bg prop and you can use one of the available color options.
bg=”dark” for black background (which you see in the above image)
bg=”white” similar to bg=”light” for a white/ light gray background
Looks a little better. We will keep improving as we go.
You can control the color of the text, we well, using variant
You use variant=”dark” with bg=”color” to give the white text as shown below. Of course, use light with bg=”light”
Here is the code that you need for Navbar with a Brand only.
Adding a Link
You might want the Brand to route to home, about, or any other page. We may use href=”” for that
Add a logo
You can add a logo using img, as follows
I used the logo coming with create-react-app
<Container>
Putting the Navbar inside a container to center it on the page
Published on LinkedIn By the same Author:
