React Bootstrap — List Group Tabs and Modals

Photo by Steve Smith on Unsplash

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 list groups tabs and modals to a React app with React Bootstrap.

Tabbed Interfaces

We can use list groups as tab components.

To do that, we can put it in the Tab.Container component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ListGroup from "react-bootstrap/ListGroup";
import Tab from "react-bootstrap/Tab";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
export default function App() {
  return (
    <div>
      <Tab.Container defaultActiveKey="link1">
        <Row>
          <Col sm={3}>
            <ListGroup>
              <ListGroup.Item action href="link1">
                Link 1
              </ListGroup.Item>
              <ListGroup.Item action href="link2">
                Link 2
              </ListGroup.Item>
            </ListGroup>
          </Col>
          <Col sm={9}>
            <Tab.Content>
              <Tab.Pane eventKey="link1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi…