Category: React

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add responsive tables and tabs with React Bootstrap.

Responsive

We can add a responsive prop to make the table responsive.

To make it always responsive, we add the prop without a value.

So we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";

export default function App() {
  return (
    <>
      <Table responsive>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>mary</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

We can also make it responsive on specific breakpoints.

We can set sm , md , lg , or xl to make them responsive on those breakpoints:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";

export default function App() {
  return (
    <>
      <Table responsive="sm">
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>mary</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

With sm , we make the table responsive if the screen is small.

Tabbed Components

We can add a tabbed interface with the Tabs and Tab components.

It can be controlled which means it’s controlled by a state.

Or it can be uncontrolled which means there are no states associated with it.

To add an uncontrolled tab component, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";

export default function App() {
  return (
    <>
      <Tabs defaultActiveKey="foo">
        <Tab eventKey="foo" title="foo">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          rutrum fermentum massa, eu rhoncus arcu ultricies quis. Fusce accumsan
          orci et egestas viverra.
        </Tab>
        <Tab eventKey="bar" title="bar">
          Integer tincidunt semper nulla sit amet sollicitudin. Orci varius
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </Tab>
        <Tab eventKey="baz" title="baz" disabled>
          Fusce sit amet euismod elit. Aliquam lacinia velit a lacus congue, nec
          rutrum odio tempus. Donec eu sodales nunc, in convallis elit.
        </Tab>
      </Tabs>
    </>
  );
}

We have the Tabs component to create the tabbed interface.

Tab is the component for adding each tab.

eventKey is the key for each tab.

title is created for the title of the tab.

disabled makes a tab disabled.

defaultActiveKey is the default event key, which lets us set the default tab.

Controlled Tabs

We can also set the state to control the tabs.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";

export default function App() {
  const [key, setKey] = React.useState("bar");

return (
    <>
      <Tabs activeKey={key} onSelect={k => setKey(k)}>
        <Tab eventKey="foo" title="foo">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          rutrum fermentum massa, eu rhoncus arcu ultricies quis. Fusce accumsan
          orci et egestas viverra.
        </Tab>
        <Tab eventKey="bar" title="bar">
          Integer tincidunt semper nulla sit amet sollicitudin. Orci varius
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </Tab>
        <Tab eventKey="baz" title="baz" disabled>
          Fusce sit amet euismod elit. Aliquam lacinia velit a lacus congue, nec
          rutrum odio tempus. Donec eu sodales nunc, in convallis elit.
        </Tab>
      </Tabs>
    </>
  );
}

to have tabs that are controlled by the key state.

We have the activeKey to set the key of the active tab.

We set which tab is active by setting keyto the eventKey of the tab.

onSelect will let us set key to the eventKey value of the active tab when a tab is clicked.

No Animation

We can disable animation with the transition set to false .

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";

export default function App() {
  return (
    <>
      <Tabs defaultActiveKey="foo" transition={false}>
        <Tab eventKey="foo" title="foo">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          rutrum fermentum massa, eu rhoncus arcu ultricies quis. Fusce accumsan
          orci et egestas viverra.
        </Tab>
        <Tab eventKey="bar" title="bar">
          Integer tincidunt semper nulla sit amet sollicitudin. Orci varius
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </Tab>
        <Tab eventKey="baz" title="baz" disabled>
          Fusce sit amet euismod elit. Aliquam lacinia velit a lacus congue, nec
          rutrum odio tempus. Donec eu sodales nunc, in convallis elit.
        </Tab>
      </Tabs>
    </>
  );
}

to disable animation with transition set to false .

Conclusion

We can make tables responsive with React Bootstrap.

Also, we can add tabs with the Tabs component.

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add pagination buttons and progress bar with React Bootstrap.

Pagination

We can add pagination buttons with the Pagination component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Pagination from "react-bootstrap/Pagination";

let active = 2;
let items = [];
for (let num = 1; num <= 10; num++) {
  items.push(
    <Pagination.Item key={num} active={num === active}>
      {num}
    </Pagination.Item>
  );
}

export default function App() {
  return (
    <>
      <Pagination>{items}</Pagination>
    </>
  );
}

We have the Pagination component, which has Pagination.Item components inside them to display pagination links.

Also, on each item, we set the active prop to highlight the one that’s active.

More Options

We can add buttons for going to the first page, the previous page, the next page, the last page and show ellipsis.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Pagination from "react-bootstrap/Pagination";

export default function App() {
  return (
    <>
      <Pagination>
        <Pagination.First />
        <Pagination.Prev />
        <Pagination.Item>{1}</Pagination.Item>
        <Pagination.Ellipsis />

        <Pagination.Item disabled>{10}</Pagination.Item>
        <Pagination.Item>{11}</Pagination.Item>
        <Pagination.Item active>{12}</Pagination.Item>
        <Pagination.Item>{13}</Pagination.Item>

        <Pagination.Ellipsis />
        <Pagination.Item>{20}</Pagination.Item>
        <Pagination.Next />
        <Pagination.Last />
      </Pagination>
    </>
  );
}

The Pagination.First component lets us add a button to go to the first page.

Pagination.Prev lets us add a button to go to the previous page.

Pagination.Ellipsis lets us show an ellipsis in the Pagination component.

Pagination.Next lets us add a button to go to the next page.

And Pagination.Last lets us add a button to go to the last page.

Progress Bar

A progress bar lets us show progress feedback to the user.

We can add one with the ProgressBar component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar now={80} />
    </>
  );
}

We just add the ProgressBar with the now prop to indicate the progress.

We can add a label with the label prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

const now = 80;
export default function App() {
  return (
    <>
      <ProgressBar now={now} label={`${now}%`} />
    </>
  );
}

The srOnly prop lets us make the label only available to screen readers, so it won’t be shown:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

const now = 80;
export default function App() {
  return (
    <>
      <ProgressBar now={now} label={`${now}%`} srOnly />
    </>
  );
}

Style Alternatives

We can add the variant prop to change the styles:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar variant="success" now={60} />
      <ProgressBar variant="info" now={23} />
      <ProgressBar variant="warning" now={30} />
      <ProgressBar variant="danger" now={86} />
    </>
  );
}

We add the variant with various names to style them differently.

Now the bars should have different colors.

Striped

We can add stripes to the bars with the striped prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar striped variant="success" now={60} />
      <ProgressBar striped variant="info" now={23} />
      <ProgressBar striped variant="warning" now={30} />
      <ProgressBar striped variant="danger" now={86} />
    </>
  );
}

Animated Stripes

To make them stripes animated, we can add the animated prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar animated variant="success" now={60} />
    </>
  );
}

Stacked

Multiple progress bars can be stacked.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar>
        <ProgressBar striped variant="success" now={25} key={1} />
        <ProgressBar variant="warning" now={20} key={2} />
        <ProgressBar striped variant="danger" now={10} key={3} />
      </ProgressBar>
    </>
  );
}

We add the key so that React can identify them.

And we add the variant to style them differently.

now has the progress.

They’re displayed one after the other.

Conclusion

We can add pagination with the Pagination component.

It has many pagination buttons and buttons for jumping to various pages.

React Bootstrap also comes with a progress bar component that can have various styles and labels.

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add overlays with React Bootstrap.

Overlay

Overlays are tooltips that we can display when we click or hover over an element.

To add a simple one, we use the Overlay component:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import Overlay from "react-bootstrap/Overlay";

export default function App() {
  const [show, setShow] = React.useState(false);
  const target = React.useRef(null);

return (
    <>
      <Button variant="primary" ref={target} onClick={() => setShow(!show)}>
        Click me
      </Button>
      <Overlay target={target.current} show={show} placement="right">
        {({
          placement,
          scheduleUpdate,
          arrowProps,
          outOfBoundaries,
          show: _show,
          ...props
        }) => (
          <div
            {...props}
            style={{
              backgroundColor: "orange",
              padding: "2px 10px",
              color: "white",
              borderRadius: 3,
              ...props.style
            }}
          >
            tooltip
          </div>
        )}
      </Overlay>
    </>
  );
}

We create a ref with the useRef on the button so that it can be referenced in the Overlay component.

This way, it’ll be shown when we click on the button.

Then we add the Overlay component, which takes a function with an object with various properties as a parameter as a child.

placement sets the placement.

scheduleUpdate lets the overlay reposition itself.

arrowProps lets us change the position of the tooltip arrow.

The function returns an element with some styles and the content for what to display.

The target prop is the element that’ll trigger the element to be displayed.

In our example, it’ll be the button.

placement is set to right to display it on the right.

OverlayTrigger

We can use the OverlayRrigger component to create an overlay with a trigger all one place.

This way, we don’t need to create a ref for the trigger

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";

function renderTooltip(props) {
  return <Tooltip {...props}>tooltip</Tooltip>;
}

export default function App() {
  return (
    <>
      <OverlayTrigger
        placement="right"
        delay={{ show: 250, hide: 400 }}
        overlay={renderTooltip}
      >
        <Button variant="success">Hover me</Button>
      </OverlayTrigger>
    </>
  );
}

to simplify our tooltip code.

We use the OverlayTrigger component with the placement set to the right .

delay is an object to set the delays when we show or hide the tooltip in milliseconds.

overlay has the component with the tooltip.

It takes all the props which we pass into the Tooltip .

We can set the placement of the tooltip with the placement prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";

export default function App() {
  return (
    <>
      {["top", "right", "bottom", "left"].map(placement => (
        <OverlayTrigger
          key={placement}
          placement={placement}
          overlay={<Tooltip>Tooltip {placement}.</Tooltip>}
        >
          <Button variant="secondary">Tooltip {placement}</Button>
        </OverlayTrigger>
      ))}
    </>
  );
}

It can be top, right, bottom, or left.

Popovers

We can have popovers, which are tooltips with more content.

They look like the opens found in iOS.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";

const popover = (
  <Popover>
    <Popover.Title as="h1">Popover right</Popover.Title>
    <Popover.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing <b>lit.</b>
    </Popover.Content>
  </Popover>
);

export default function App() {
  return (
    <>
      <OverlayTrigger trigger="click" placement="right" overlay={popover}>
        <Button variant="success">Click me</Button>
      </OverlayTrigger>
    </>
  );
}

to add a pop over to the right of the button.

It’s displayed when we click it.

We use the built-in Popover component to display it when we triggered it.

We pass it into the overlay prop so that it’ll be displayed when we click on the button as the trigger indicated.

Popovers can also be placed in different locations just like tooltips:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";

export default function App() {
  return (
    <>
      {["top", "right", "bottom", "left"].map(placement => (
        <OverlayTrigger
          trigger="click"
          key={placement}
          placement={placement}
          overlay={
            <Popover id={`popover-positioned-${placement}`}>
              <Popover.Title as="h1">{`Popover ${placement}`}</Popover.Title>
              <Popover.Content>
                Lorem ipsum dolor sit amet, consectetur adipiscing <b>lit.</b>
              </Popover.Content>
            </Popover>
          }
        >
          <Button variant="secondary">Popover {placement}</Button>
        </OverlayTrigger>
      ))}
    </>
  );
}

We set the placement prop to top , right , bottom , or left to display them in those locations.

Conclusion

We can add tooltips and popovers with the Overlay or OverlayTrigger component.

OverlayTrigger is shorter so we can write less code.

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to customize navs to a React app with React Bootstrap.

Alignment and Orientation of Navs

We can change the alignment or orientation of navs.

To do that, we can add class names on the Nav to do that:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav className="justify-content-center" defaultActiveKey="/home">
        <Nav.Item>
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="bar">bar</Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

We add the justify-content-center class to make the nav centered on the page.

Vertical Nav

We can make the nav vertical by adding the flex-column class to the nav.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" className="flex-column">
        <Nav.Link href="/home">home</Nav.Link>
        <Nav.Link eventKey="foo">foo</Nav.Link>
        <Nav.Link eventKey="bar">bar</Nav.Link>
        <Nav.Link eventKey="disabled" disabled>
          disabled
        </Nav.Link>
      </Nav>
    </>
  );
}

to make the nav vertical.

Display as Tabs

We can make the nav display as tabs.

To do that, we set the variant to tabs .

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" variant="tabs">
        <Nav.Link href="/home">home</Nav.Link>
        <Nav.Link eventKey="foo">foo</Nav.Link>
        <Nav.Link eventKey="bar">bar</Nav.Link>
        <Nav.Link eventKey="disabled" disabled>
          disabled
        </Nav.Link>
      </Nav>
    </>
  );
}

Now we see the nav links displayed as tabs.

Pills

We can also change the variant to pills to make them display as pills, which are rounded buttons:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" variant="pills">
        <Nav.Link href="/home" active>
          home
        </Nav.Link>
        <Nav.Link eventKey="foo">foo</Nav.Link>
        <Nav.Link eventKey="bar">bar</Nav.Link>
        <Nav.Link eventKey="disabled" disabled>
          disabled
        </Nav.Link>
      </Nav>
    </>
  );
}

Fill and Justify

We can force the contents of our nav to fill the available width with the fill prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" fill>
        <Nav.Item>
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="baz">bar</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            Disabled
          </Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

We’ve to wrap the Nav.Link s with Nav.Item s to make the fill work.

We can make each nav item the same size with justify:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" justify>
        <Nav.Item>
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="baz">bar</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            Disabled
          </Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

Using Dropdowns

We can put a dropdown in our nav with the NavDropdown component.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" justify>
        <Nav.Item>
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="baz">bar</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            disabled
          </Nav.Link>
        </Nav.Item>
        <NavDropdown title="dropdown">
          <NavDropdown.Item eventKey="1">action 1</NavDropdown.Item>
          <NavDropdown.Item eventKey="2">action 2</NavDropdown.Item>
          <NavDropdown.Item eventKey="3">action 3</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item eventKey="4">action 4</NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </>
  );
}

to add a dropdown with items inside.

The NavDropdown.Item component render the items.

Conclusion

We can add dropdowns to navs.

The sizes of the items can be changed in various ways.

We can also change the nav alignment.

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add navbars to a React app with React Bootstrap.

Navbars

We can add navbars to add a navigation header with support for branding and navigation.

We can use the expand prop to allow for collapsing the navbar at lower breakpoints.

Navbars and their content are fluid by default.

To make a navbar, we can use the Navbar component:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import FormControl from "react-bootstrap/FormControl";
import NavDropdown from "react-bootstrap/NavDropdown";

export default function App() {
  return (
    <>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href="#home">nav bar</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse>
          <Nav className="mr-auto">
            <Nav.Link href="#home">home</Nav.Link>
            <Nav.Link href="#foo">foo</Nav.Link>
            <NavDropdown title="Dropdown">
              <NavDropdown.Item href="#action/1">action 1</NavDropdown.Item>
              <NavDropdown.Item href="#action/2">action 2</NavDropdown.Item>
              <NavDropdown.Item href="#action/3">action 3</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/4">action 4</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>
    </>
  );
}

We created a navbar with the NavBar component.

The bg prop has the background color,.

Navbar.Brand has the brand name on the left side.

Navbar.Toggle is the toggle for opening the menu in the collapsed navbar.

Navbar.Collapse is a navbar that automatically collapses when the screen is narrow.

Nav.Link has the links.

NavDropdown has the dropdown.

title has the text that’s displayed in the dropdown toggle.

We also have an inline Form element to let us add a form inside the nav.

Navbar Brand

The brand can be an image or text.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";

export default function App() {
  return (
    <>
      <Navbar bg="light">
        <Navbar.Brand href="#home">app</Navbar.Brand>
      </Navbar>
    </>
  );
}

to add text to the left side.

bg is the background color, which can be light or dark .

We can also add an image by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";

export default function App() {
  return (
    <>
      <Navbar bg="light">
        <Navbar.Brand href="#home">
          <img
            alt="logo"
            src="http://placekitten.com/200/200"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />{" "}
          app
        </Navbar.Brand>
      </Navbar>
    </>
  );
}

to add a logo to the nav brand.

We have the className set to d-inline-block and align-top to add some margins to the logo.

Forms

We can add forms to a navbar if they’re inline.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";
import Form from "react-bootstrap/Form";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import Button from "react-bootstrap/Button";

export default function App() {
  return (
    <>
      <Navbar className="bg-light justify-content-between">
        <Form inline>
          <InputGroup>
            <InputGroup.Prepend>
              <InputGroup.Text>@</InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl
              placeholder="name"
            />
          </InputGroup>
        </Form>
        <Form inline>
          <FormControl type="text" placeholder="search" className=" mr-sm-2" />
          <Button type="submit">Submit</Button>
        </Form>
      </Navbar>
    </>
  );
}

We add the justifyp-content-between prop to make the 2 forms display on the left and right edges.

Form set to inline so that they display inline.

Inside the Form , we have the usual InputGroup and FormControls .

Text and Non-Nav Links

We can add nav text that aren’t links with the Navbar.Text component.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";

export default function App() {
  return (
    <>
      <Navbar className="bg-light justify-content-between">
        <Navbar.Brand href="#home">text navbar</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Navbar.Text>
            hello: <a href="#login">james</a>
          </Navbar.Text>
        </Navbar.Collapse>
      </Navbar>
    </>
  );
}

We have the Navbar.Text component that shows some text and a link inside it.

Color Schemes

We can change the color scheme with the variant and bg props.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Navbar bg="primary" variant="dark">
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#foo">foo</Nav.Link>
          <Nav.Link href="#bar">bar</Nav.Link>
        </Nav>
      </Navbar>
    </>
  );
}

We have a navbar with bg set to primary to set the background color to blue .

The variant is overridden with the bg .

Conclusion

We can add forms and dropdowns to navbars.

They’re responsive.

Also, we can change the colors of navbars.