Category: React Bootstrap

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 work with React Bootstrap’s alerts in our React components.

Alerts

Alerts provide us with feedback for user actions with various styling.

For instance, we can write:

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

export default function App() {
  return (
    <>
      {[
        "primary",
        "secondary",
        "success",
        "danger",
        "warning",
        "info",
        "light",
        "dark"
      ].map((variant, index) => (
        <Alert key={index} variant={variant}>
          {variant}
        </Alert>
      ))}
    </>
  );
}

to display all varieties of alerts.

Also, we can add Alert.Link components to add links to the alerts.

For example, we can write:

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

export default function App() {
  return (
    <>
      {[
        "primary",
        "secondary",
        "success",
        "danger",
        "warning",
        "info",
        "light",
        "dark"
      ].map((variant, idx) => (
        <Alert key={idx} variant={variant}>
          {variant} <Alert.Link href="https://example.com">link</Alert.Link>.
        </Alert>
      ))}
    </>
  );
}

We used the Alert.Link component to add a link with a href to go to a URL.

Additional Content

We can also add whatever content we want.

There’s the Alert.Heading component to add a heading to the alert.

And the content can come below it.

For example, we can write:

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

export default function App() {
  return (
    <>
      {[
        "primary",
        "secondary",
        "success",
        "danger",
        "warning",
        "info",
        "light",
        "dark"
      ].map((variant, idx) => (
        <Alert variant={variant} key={idx}>
          <Alert.Heading>Title</Alert.Heading>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
          <hr />
          <p className="mb-0">
            Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
            porttitor, ornare ex et, finibus ante. Aenean mattis ligula lectus,
            a aliquet est pharetra et. Donec sit amet est massa. Maecenas dolor
            ante, congue sit amet mattis eu, vehicula quis nisl. Nulla viverra
            ligula vitae mollis sagittis. Fusce volutpat convallis purus.
            Vestibulum tincidunt elit id aliquam placerat. Vivamus vestibulum
            enim sed eros ullamcorper congue. Fusce nec tincidunt arcu. Sed sed
            suscipit justo, ac eleifend mauris. Morbi molestie turpis a accumsan
            mollis. Aenean vel diam vitae ante tincidunt varius.
          </p>
        </Alert>
      ))}
    </>
  );
}

We added an alert with a heading in the Alert.Heading component and some paragraphs below it.

Dismissing Alerts

We can make alerts dismissible with the dismissible prop.

For instance, we can write:

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

export default function App() {
  const [show, setShow] = React.useState(true);

return (
    <>
      <Button onClick={() => setShow(true)}>Show Alert</Button>
      {show && (
        <Alert variant="success" onClose={() => setShow(false)} dismissible>
          <Alert.Heading>Title</Alert.Heading>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
          <hr />
          <p className="mb-0">
            Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
            porttitor, ornare ex et, finibus ante. Aenean mattis ligula lectus,
            a aliquet est pharetra et. Donec sit amet est massa. Maecenas dolor
            ante, congue sit amet mattis eu, vehicula quis nisl. Nulla viverra
            ligula vitae mollis sagittis. Fusce volutpat convallis purus.
            Vestibulum tincidunt elit id aliquam placerat. Vivamus vestibulum
            enim sed eros ullamcorper congue. Fusce nec tincidunt arcu. Sed sed
            suscipit justo, ac eleifend mauris. Morbi molestie turpis a accumsan
            mollis. Aenean vel diam vitae ante tincidunt varius.
          </p>
        </Alert>
      )}
    </>
  );
}

We added the show state to show the alert if it’s true .

And we have a Button to make show true when clicked.

The dismissible on the Alert lets us close the alert.

The onClose prop takes a callback that lets us close the alert by setting the show state to false .

It’ll be run when the close button on the alert is clicked.

This is shown since we added the dismissble prop.

Conclusion

Alerts are boxes that let us show messages triggered by user actions.

We can show whatever we want in them and there’re several varieties of them.

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 work with React Bootstrap’s accordions in our React components.

Accordion

Accordions let us restrict card components to open only one at a time.

To use it, we can write:

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

export default function App() {
  return (
    <>
      <Accordion defaultActiveKey="0">
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              title 1
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body 1</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="1">
              title 2
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>body 2</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </>
  );
}

We imported the Accordion and Card components.

It has the defaultActionKey is the key for the default card.

Accordion.Toggle is the toggle to open the card.

as is the prop to let us specify what component to render the toggle as.

variant is the style that we want to render the toggle as.

eventKey is the key for the given card.

Fully Collapsed State

If we don’t specify the defaultActiveKey , then all cards will be collapsed.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Accordion>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              title 1
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body 1</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="1">
              title 2
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>body 2</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </>
  );
}

Make the Entire Header Clickable

We can make the entire header clickable by rendering the header as a Card.Header .

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Accordion>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Card.Header} variant="link" eventKey="0">
              title 1
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body 1</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <Accordion.Toggle as={Card.Header} variant="link" eventKey="1">
              title 2
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>body 2</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </>
  );
}

We make the part outside the text clickable by changing the as to Card.Header .

Custom Toggle

We can create our custom toggle component with the useAccordionToggle hook.

It takes the eventKey and a callback that runs when the roggle is clicked.

For instance, we can write:

import React from "react";
import Accordion from "react-bootstrap/Accordion";
import Card from "react-bootstrap/Card";
import { useAccordionToggle } from "react-bootstrap/AccordionToggle";
import "bootstrap/dist/css/bootstrap.min.css";

function CustomToggle({ children, eventKey }) {
  const decoratedOnClick = useAccordionToggle(eventKey, () =>
    console.log("toggle clicked")
  );

  return (
    <button
      type="button"
      style={{ backgroundColor: "orange" }}
      onClick={decoratedOnClick}
    >
      {children}
    </button>
  );
}

export default function App() {
  return (
    <>
      <Accordion>
        <Card>
          <Card.Header>
            <CustomToggle eventKey="0">title 1</CustomToggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body 1</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <CustomToggle eventKey="0">title 2</CustomToggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>body 2</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </>
  );
}

We have the CustomToggle component which we created ourselves.

It takes the children and eventKey props.

children lets us display content that we pass inside the component tags.

useAccordingToggle returns a click handler that opens the card with the given eventKey .

The 2nd argument is a callback that lets us run anything when the toggle is clicked.

Then we can use the CustomToggle in place of the toggle that comes with React Bootstrap to toggle our cards.

Custom Toggle with Expansion Awareness

We can also check if the toggle has expanded the card when it’s clicked.

To do that, we use the context API to listen to the accordion to the AccordionContext .

For instance, we can write:

import React from "react";
import Accordion from "react-bootstrap/Accordion";
import AccordionContext from "react-bootstrap/AccordionContext";
import Card from "react-bootstrap/Card";
import { useAccordionToggle } from "react-bootstrap/AccordionToggle";
import "bootstrap/dist/css/bootstrap.min.css";

function CustomToggle({ children, eventKey, callback }) {
  const currentEventKey = React.useContext(AccordionContext);

const decoratedOnClick = useAccordionToggle(
    eventKey,
    () => callback && callback(eventKey)
  );

const isCurrentEventKey = currentEventKey === eventKey;

return (
    <button
      type="button"
      style={{ backgroundColor: isCurrentEventKey ? "orange" : "pink" }}
      onClick={decoratedOnClick}
    >
      {children}
    </button>
  );
}

export default function App() {
  return (
    <>
      <Accordion>
        <Card>
          <Card.Header>
            <CustomToggle eventKey="0">title 1</CustomToggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>body 1</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card>
          <Card.Header>
            <CustomToggle eventKey="1">title 2</CustomToggle>
          </Card.Header>
          <Accordion.Collapse eventKey="1">
            <Card.Body>body 2</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </>
  );
}

We get the eventKey prop with our CustomToggle so that we can compare to the currentEventKey that we have in our context.

Then we have the useAccordionToggle as we did with the previous example.

It returns a click handler that we pass into onClick to expand the card.

isCurrentKey has the result of comparing the eventKey of the toggle with the one from the context which has the one that’s opened.

So we can use that to style the toggle the way we like when the card is open or closed.

Conclusion

Accordions let us restrict card components to open only one at a time.

We can customize the toggle and the card content.

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 get started with React Bootstrap.

Installation

We can install React Bootstrap by running:

npm install react-bootstrap bootstrap

Importing Components

Once we imported our components, we can add the component we want by writing:

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

export default function App() {
  return (
    <div className="App">
      <Button>button</Button>
    </div>
  );
}

We import the CSS and the button so we can add a button with the Boostrap styles.

We can also import the SASS code by writing:

@import "~bootstrap/scss/bootstrap";

This works with create-react-app apps.

Bootstrap with State

We can pass states to React Bootstrap components as we do with any other React component.

For instance, we can write:

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

export default function App() {
  const [show, setShow] = React.useState(true);

  return (
    <>
      <Button onClick={() => setShow(show => !show)} variant="outline-success">
        toggle alert
      </Button>
      <Alert show={show} variant="success">
        <Alert.Heading>title</Alert.Heading>
        <p>alert</p>
      </Alert>
    </>
  );
}

We have the show state that we use to toggle the alert.

We toggle the alert with the Button by running setShow to toggle the show state when we click the button.

Theming and Customizing Styles

We can style our components the ay we like.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <style type="text/css">
        {`
          .btn-flat {
            background-color: green;
            color: white;
          }

          .btn-xxl {
            padding: 1rem 1.5rem;
            font-size: 2.5rem;
          }
    `   }
      </style>

      <Button variant="flat" size="xxl">
        button
      </Button>
    </>
  );
}

Button takes a variant and size prop that lets us style it however we like.

Other components also have these options.

variant is the button variant, which corresponds to the name after the prefix.

size is also after the prefix.

We have the btn-flat and btn-xxl classes that we can use to style the buttons.

We have the style element to apply the styles with a CSS string.

Prefixing Components

We can change the prefix of the class with the bsPrefix prop.

Or we can do the same globally with the ThemeProvider component.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <style type="text/css">
        {`
         .super-btn-flat {
           background-color: green;
           color: white;
         }

         .super-btn-xxl {
           padding: 1rem 1.5rem;
           font-size: 2.5rem;
         }
       `}
      </style>

      <Button bsPrefix="super-btn" variant="flat" size="xxl">
        button
      </Button>
    </>
  );
}

We change bsPrefix to super-btn , so all the class names of the button are prefixed with super-btn .

Therefore, our styles all have this prefix as their selectors.

We can do the same globally with the ThemeProvider as follows:

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

export default function App() {
  return (
    <>
      <style type="text/css">
        {`
          .super-btn-flat {
            background-color: green;
            color: white;
          }

          .super-btn-xxl {
            padding: 1rem 1.5rem;
            font-size: 2.5rem;
          }
       `}
      </style>
      <ThemeProvider prefixes={{ btn: "super-btn" }}>
        <Button variant="flat" size="xxl">
          button
        </Button>
      </ThemeProvider>
    </>
  );
}

We pass in an object to the prefixes prop.

And we set the btn property to super-btn to change the class name prefix of the button.

Conclusion

We can use React Bootstrap as a widget library for our React apps.

It provides styled React components that are styled in the Bootstrap style.

We can theme them with global styles or apply our local styles to them.

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 spinners with React Bootstrap.

Spinners

Spinners are used to show the loading state of our data.

To use it, we can use the Spinner component:

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

export default function App() {
  return (
    <>
      <Spinner animation="border" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    </>
  );
}

We add the Spinner with the animation prop.

border means that we have a circle that spins as the spinner.

We can also add text for screen readers with the sr-only class.

It’ll be read by screen readers but users won’t see them.

Animations

We can also set the animation prop to grow .

Then we’ll get a throbbing spinner:

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

export default function App() {
  return (
    <>
      <Spinner animation="grow" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    </>
  );
}

Variants

There’re various styling variants for spinners.

All the common Bootstrap ones are available.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Spinner animation="border" variant="primary" />
      <Spinner animation="border" variant="secondary" />
      <Spinner animation="border" variant="success" />
      <Spinner animation="border" variant="danger" />
      <Spinner animation="border" variant="warning" />
      <Spinner animation="border" variant="info" />
      <Spinner animation="border" variant="light" />
      <Spinner animation="border" variant="dark" />
      <Spinner animation="grow" variant="primary" />
      <Spinner animation="grow" variant="secondary" />
      <Spinner animation="grow" variant="success" />
      <Spinner animation="grow" variant="danger" />
      <Spinner animation="grow" variant="warning" />
      <Spinner animation="grow" variant="info" />
      <Spinner animation="grow" variant="light" />
      <Spinner animation="grow" variant="dark" />
    </>
  );
}

Then we get spinners with different colors and animation styles.

Sizes

We can also change the sizes of the spinner,

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Spinner animation="border" size="sm" />
      <Spinner animation="border" />
      <Spinner animation="grow" size="sm" />
      <Spinner animation="grow" />
    </>
  );
}

to set the size with the size prop.

sm means smaller than the normal size.

We can also write lg to make them bigger than normal.

Buttons

We can put spinners in buttons.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Button variant="success" disabled>
        <Spinner as="span" animation="border" size="sm" />
        <span className="sr-only">Loading...</span>
      </Button>{" "}
      <Button variant="success" disabled>
        <Spinner as="span" animation="grow" size="sm" />
        Loading...
      </Button>
    </>
  );
}

to create buttons with the Spinner inside.

We make them small so they’re sized the same as the button text.

Tables

We can add tables with React Bootstrap.

It comes with the Table component to let us create simple tables:

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

export default function App() {
  return (
    <>
      <Table striped bordered hover>
        <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 just wrap the Table around the regular table elements to create a table.

striped makes the rows alternate in color.

bordered adds borders to the rows.

hover changes the color of the row when we highlight it.

Small Table

We can set the size prop to change the size of the table.

For instance, 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 striped bordered hover size="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>
    </>
  );
}

Then the rows are smaller than usual.

Dark Table

We can set the variant prop to dark to make it dark:

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

export default function App() {
  return (
    <>
      <Table striped bordered hover variant="dark">
        <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>
    </>
  );
}

Now all the rows are dark.

Conclusion

We can add spinners to show that something is loading.

Tables can be added with the Table 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 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.