React Bootstrap: A Comprehensive Guide to the Most Common Components with Code Examples

React Bootstrap is a UI library built on top of the popular React framework, specifically designed to simplify the development of responsive web applications. It provides a comprehensive suite of components that align with Bootstrap's design principles, ensuring consistency and ease of use.

Getting Started with React Bootstrap

To use React Bootstrap, you first need to install it using npm or yarn:

npm install react-bootstrap

or

yarn add react-bootstrap

Once installed, you can import the components you need into your React application:

import { Button } from 'react-bootstrap';

Commonly Used React Bootstrap Components

Let's explore some of the most commonly used React Bootstrap components:

1. Container

The <Container> component provides a container for your page content, ensuring proper spacing and layout. It supports various widths and can be aligned horizontally.

import { Container } from 'react-bootstrap';

const MyContainer = () => {
  return (
    <Container>
      <h1>Hello, world!</h1>
      <p>This is a container.</p>
    </Container>
  );
};

2. Row

<Row> is used to organize content horizontally. It creates a grid-like structure within <Container> and can hold <Col> components to further define column widths.

import { Row } from 'react-bootstrap';

const MyRow = () => {
  return (
    <Row>
      <Col>Column 1</Col>
      <Col>Column 2</Col>
    </Row>
  );
};

3. Col

<Col> represents a column within a <Row>. It allows you to control the number of columns and their width proportions using the "xs", "sm", "md", "lg", and "xl" props.

import { Col } from 'react-bootstrap';

const MyCol = () => {
  return (
    <Col xs={6} md={4}>
      Column with 6 columns on extra small screens and 4 columns on medium screens.
    </Col>
  );
};

4. Button

<Button> creates interactive buttons with various styles, such as primary, secondary, and outline. They can be customized with size, shape, and color options.

import { Button } from 'react-bootstrap';

const MyButton = () => {
  return (
    <Button variant="primary">Click me!</Button>
  );
};

5. Card

<Card> represents a content card, typically used to display information or group related content. It includes header, body, and footer sections.

import { Card } from 'react-bootstrap';

const MyCard = () => {
  return (
    <Card>
      <Card.Header>Card Header</Card.Header>
      <Card.Body>Card Body</Card.Body>
      <Card.Footer>Card Footer</Card.Footer>
    </Card>
  );
};

6. Form

<Form> allows you to create forms with input fields, buttons, and other form elements. It provides basic validation and form handling capabilities.

import { Form } from 'react-bootstrap';

const MyForm = () => {
  return (
    <Form>
      <Form.Group controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
      </Form.Group>

      <Form.Group controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>

      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
};

7. Input

<Input> is used to create various input elements, such as text, password, and email fields. It supports custom validation and can be used within <Form>.

import { Input } from 'react-bootstrap';

const MyInput = () => {
  return (
    <Input type="text" placeholder="Enter your name" />
  );
};

8. Table

<Table> creates tabular data, with support for responsive layouts. It allows you to customize column alignment, sort data, and filter rows.

import { Table } from 'react-bootstrap';

const MyTable = () => {
  return (
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>Animal</th>
          <th>Sound</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cat</td>
          <td>Meow</td>
        </tr>
        <tr>
          <td>Dog</td>
          <td>Woof</td>
        </tr>
      </tbody>
    </Table>
  );
};

9. Nav

<Nav> represents a navigation bar or menu. It provides support for tabs, pills, and other navigation elements that can be placed in <Container> or <Row>.

import { Nav } from 'react-bootstrap';

const MyNav = () => {
  return (
    <Nav>
      <Nav.Item>
        <Nav.Link href="/">Home</Nav.Link>
      </Nav.Item>);};

10. Modal

<Modal> creates a modal window that can overlay the page and display important information or take user input. It supports various sizes and can be closed programmatically or by clicking on the close button.

import { useState } from 'react';
import {Button , Modal} from 'react-bootstrap';


const MyModal = () => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you are reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

11. Dropdown

<Dropdown> creates dropdown menus that can be attached to any element. It supports multiple levels of dropdowns with customizable triggers and placements.

import { Dropdown } from 'react-bootstrap';

const MyDropdown = () => {
  return (
    <Dropdown>
      <Dropdown.Toggle variant="primary" id="dropdown-basic">
        Dropdown Button
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Action 1</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Action 2</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Action 3</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};

12. Alert

<Alert> allows you to display alert messages with various styles, such as success, warning, and danger. They can be closed programmatically or automatically after a specified time.

import { Alert } from 'react-bootstrap';

const MyAlert = () => {
  return (
    <Alert variant={"primary"}>
      This is a primary alert—check it out!
    </Alert>
  );
};

13. Spinner

<Spinner> creates loading indicators to visually communicate that a process is in progress. It supports various sizes and styles to match different website designs.

import { Spinner } from 'react-bootstrap';

const MySpinner = () => {
  return (
    <Spinner animation="border" role="status">
      <span className="visually-hidden">Loading...</span>
    </Spinner>
  );
};

14. Placeholder

<Placeholder> provides placeholder text or images for elements that are yet to be filled with real content. It can be used to create realistic mockups or demonstrate the layout of your application.

import { Placeholder } from 'react-bootstrap';

const MyPlaceholder = () => {
  return (
    <Placeholder animation="glow">
      <Placeholder xs={12} />
      <Placeholder xs={12} />
    </Placeholder>
  );
};

15. Accordion

<Accordion> creates collapsible accordion panels. It allows users to toggle between sections of content, keeping the interface organized and clutter-free.

import { Container } from 'react-bootstrap';

const MyContainer = () => {
  return (
    <Container>
      <h1>Hello, world!</h1>
      <p>This is a container.</p>
    </Container>
  );
};

16. Tooltip

<Tooltip> adds tooltips to any element by providing a hoverable or clickable trigger. Tooltips display additional information or context.

import { useState, useRef } from 'react';
import {Button,Overlay,Tooltip} from 'react-bootstrap';

function MyToolTip() {
  const [show, setShow] = useState(false);
  const target = useRef(null);

  return (
    <>
      <Button ref={target} onClick={() => setShow(!show)}>
        Click me!
      </Button>
      <Overlay target={target.current} show={show} placement="right">
        {(props) => (
          <Tooltip id="overlay-example" {...props}>
            My Tooltip
          </Tooltip>
        )}
      </Overlay>
    </>
  );
}

17. Pagination

<Pagination> provides page navigation controls, such as numbered pages or previous/next buttons. It enables users to easily navigate through paginated content.

import { Pagination } from 'react-bootstrap';

const MyPagination = () => {
  return (
    <Pagination>
      <Pagination.First />
      <Pagination.Prev />
      <Pagination.Item active>{1}</Pagination.Item>
      <Pagination.Item>{2}</Pagination.Item>
      <Pagination.Item>{3}</Pagination.Item>
      <Pagination.Next />
      <Pagination.Last />
    </Pagination>
  );
};

18. Overlay

<Overlay> adds an overlay to a target element, making it possible to create pop-up windows or tooltips that are independent of the DOM structure. It's a wrapper around Popper.js, that adds support for transitions, and visibility toggling.Used in combination with tooltip and popover .

import { Overlay, Tooltip, Button } from 'react-bootstrap';

const MyOverlay = () => {
  const [show, setShow] = useState(false);
  const target = useRef(null);

  const handleClick = () => {
    setShow(!show);
  };

  return (
    <>
      <Overlay target={target} show={show} placement="right">
        {({ popper, arrow, show: _show }) => (
          <Tooltip id="overlay-tooltip">
            This is an overlay!
          </Tooltip>
        )}
      </Overlay>

      <Button ref={target} onClick={handleClick}>Toggle Overlay</Button>
    </>
  );
};

19. Popover

<Popover> is a more complex version of tooltip that allows for the display of more detailed content. It can be triggered by clicking or hovering and supports custom placement.

import { Popover, OverlayTrigger,  } from 'react-bootstrap';

const MyPopover = () => {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Header as="h3">Popover title</Popover.Header>
      <Popover.Body>
        And here's some amazing content. It's very engaging. Right?
      </Popover.Body>
    </Popover>
  );

  return (
    <>
      <OverlayTrigger trigger="click" placement="right" overlay={popover}>
        <Button>Click me to see a popover!</Button>
      </OverlayTrigger>
    </>
  );
};

20. Toast

<Toast> is a notification component that appears briefly at the bottom of the screen. It can be used to display success messages, errors, or other system notifications.

import { Toast } from 'react-bootstrap';

const MyToast = () => {
  const [show, setShow] = useState(true);

  const handleClose = () => setShow(false);

  return (
    <>
      <Toast onClose={handleClose} show={show} delay={3000} autohide>
        <Toast.Header>
          <img
            src=""
            className="rounded me-2"
            alt=""
          />
          <strong className="me-auto">Tasty Toast</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Hello, world! This is a toast message.
        </Toast.Body>
      </Toast>
    </>
  );
};

Conclusion

React Bootstrap is an indispensable toolkit for React developers, providing a comprehensive range of UI components that adhere to Bootstrap's design principles. By leveraging these components, you can rapidly create responsive, visually appealing web applications that deliver a consistent and seamless user experience across different devices.