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

Modal Sizes

We can change the size of the modal with the size prop.

For example, we can write:

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

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

const onClose = () => setShow(false);
  const onClick = () => setShow(true);

return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal size="sm" show={show} onHide={onClose} keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

to make the modal small.

To make them large, we can set the size prop to lg .

Sizing Modals using Custom CSS

We can set the size of a modal using custom CSS.

To do that we can add the dialogClassName prop to the modal.

For example, we can write:

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

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

const onClose = () => setShow(false);
  const onClick = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal
        dialogClassName="modal-90w"
        show={show}
        onHide={onClose}
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

We set the dialogClassName to a class name, and then we can add our own CSS rules for the class name if we want.

Navigation

To add navigation to our React app, we can use the Nav component.

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
        activeKey="/home"
        onSelect={selectedKey => alert(`selected ${selectedKey}`)}
      >
        <Nav.Item>
          <Nav.Link href="/home">active</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.Item>
          <Nav.Link eventKey="disabled" disabled>
            disabled
          </Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

We have the Nav component with the activeKey prop.

This sets the href of the active link.

eventKey is a unique key for each nav item.

Inside it, we have the Nav.Item components to add the nav items.

href has the path that the link goes to.

We can also render the nav component as ul elements.

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" as="ul">
        <Nav.Item as="li">
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item as="li">
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item as="li">
          <Nav.Link eventKey="bar">bar</Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

to display our nav as a ul.

We did that with the as prop.

The Nav has as set to ul and Nav.Item s have as set to li .

Conclusion

We can size models with classes or the size prop.

Also, we can add a navs with React Boostrap.

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

Modals Without Animation

We can disable animations on a modal if we set the animation prop to false .

For example, we can write:

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

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

const onClose = () => setShow(false);
  const onClick = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal
        animation={false}
        show={show}
        onHide={onClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus. escape key.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

We have the animation prop set to false so that we won’t see any animation when we open or close the modal.

We have the open modal button to set the show state to true to open the modal.

And we have the onHide prop set to the onClose button to make it close when we click the close button.

keyboard set to false disables the closing with the Esc key.

Vertically Centered

We can make the modal vertically centered.

To do that, we just add the centered prop.

For example, we can write:

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

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

const onClose = () => setShow(false);
  const onClick = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal centered show={show} onHide={onClose} keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus. escape key.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

With the centered prop on the Modal , the modal will be vertically centered.

Using the Grid

We can use the layout grid in the modal.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";

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

const onClose = () => setShow(false);
  const onClick = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal centered show={show} onHide={onClose} keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Container>
            <Row>
              <Col xs={12} md={6}>
                foo
              </Col>
              <Col xs={12} md={6}>
                bar
              </Col>
            </Row>

            <Row>
              <Col xs={6} md={8}>
                foo
              </Col>
              <Col xs={6} md={4}>
                bar
              </Col>
            </Row>
          </Container>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

We have a Container component with Row and Col to display the layout our way.

As with any other content, we can set the width according to the breakpoints as we did in the Col s.

We set the column size from 1 to 12, which is narrowest to widest respectively.

Conclusion

We can disable animation in modals.

Also, we can make them vertically centered.

Layout grids can also be inside modals.

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
                efficitur massa tellus, non ultrices augue sagittis ornare. Sed
                ultrices ligula in est tempus tincidunt.
              </Tab.Pane>
              <Tab.Pane eventKey="link2">
                Nam id consequat lacus, et mattis turpis. Sed velit nibh,
                tincidunt in ante a, accumsan fringilla odio. Etiam fermentum
                euismod enim id faucibus. Etiam facilisis nulla id leo imperdiet
                aliquet.
              </Tab.Pane>
            </Tab.Content>
          </Col>
        </Row>
      </Tab.Container>
    </div>
  );
}

to use the list group items as navigation links.

We set the defaultEventKey to set the default tab to display.

And we set the eventKey on each Tab.Pane to name them so that we can make links for them with the href prop on the ListGroup.Item .

Modals

Modals are dialog boxes that we can add on our site.

It can be used for notifications or custom content.

They’re positioned over everything else in the document and remove scroll from the body so that the modal content scrolls.

Modals are unmounted when closed.

We can only display one modal at a time.

Modals keep the keyboard focus on the modal.

We can make basic modal by using the Modalcomponents:

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

export default function App() {
  return (
    <div>
      <Modal.Dialog>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
            efficitur massa tellus, non ultrices augue sagittis ornare. Sed
            ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
            mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan
            fringilla odio. Etiam fermentum euismod enim id faucibus. Etiam
            facilisis nulla id leo imperdiet aliquet. In dignissim nulla non
            magna commodo ullamcorper. Fusce non ligula id tellus dapibus tempor
            sit amet in libero. Proin malesuada vulputate augue in bibendum. In
            mollis felis eu ante pharetra, ut vehicula sapien malesuada. Nulla
            imperdiet, urna a laoreet ullamcorper, massa nunc posuere neque,
            iaculis egestas urna arcu a metus.
          </p>
        </Modal.Body>

        <Modal.Footer>
          <Button variant="secondary">Close</Button>
          <Button variant="primary">Save </Button>
        </Modal.Footer>
      </Modal.Dialog>
    </div>
  );
}

Modal.Dialog lets us display the dialog.

Modal.Header has the header.

closeButton adds the close button.

Modal.Title has the modal title.

Modal.Body has the modal body content.

Modal.Footer has the modal footer, where we can add some buttons if we wish.

Static Backdrop

We can use the Modal component and set the backdrop prop to static to make a static backdrop.

This way, we won’t close the modal if we click outside it.

For example, we can write:

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

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

  const onClose = () => setShow(false);
  const onClick = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal show={show} onHide={onClose} backdrop="static" keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus. escape key.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

backdrop set to static lets us disable closing with anything other than the close button.

We can only close if we click the close button.

We can’t click outside or press the Esc key to close it.

keyboard set to false disables closing with the Esc key.

The show prop is used to control when the modal is open or not.

We have the onHide prop to set the show state to false to close the modal.

Also, we have an open modal button to set the show state to true when we click it.

This will open the modal.

Conclusion

We can use list group items as tabs.

With the Modal component, we can add modals easily.

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 to a React app with React Bootstrap.

Make it Flush

We can add the variant prop and set it to 'flush' to remove the outer borders and rounded corners from the list group.

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup variant="flush">
        <ListGroup.Item>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis.
        </ListGroup.Item>
        <ListGroup.Item>
          In euismod egestas dictum. Curabitur vel ipsum in eros commodo egestas
          sed sed augue. In hac habitasse platea dictumst. In pretium massa in
          urna tincidunt vulputate. Duis eget tristique nisi, auctor pharetra
          ex. Duis rhoncus, lectus vitae consequat blandit, lectus sem rhoncus
          lorem, sit amet viverra tortor est in mi.
        </ListGroup.Item>
        <ListGroup.Item>
          Ut pretium sollicitudin vehicula. In hac habitasse platea dictumst.
          Morbi fringilla mauris sit amet quam tempor, vulputate consequat dolor
          tempor. Duis magna quam, molestie et velit a, cursus porttitor mi.
          Fusce consectetur faucibus elit ut dictum.
        </ListGroup.Item>
      </ListGroup>
    </div>
  );
}

Display Items Horizontally

We can display items horizontally if we add the horizontal prop to it.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup horizontal>
        <ListGroup.Item>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis.
        </ListGroup.Item>
        <ListGroup.Item>
          In euismod egestas dictum. Curabitur vel ipsum in eros commodo egestas
          sed sed augue. In hac habitasse platea dictumst. In pretium massa in
          urna tincidunt vulputate. Duis eget tristique nisi, auctor pharetra
          ex. Duis rhoncus, lectus vitae consequat blandit, lectus sem rhoncus
          lorem, sit amet viverra tortor est in mi.
        </ListGroup.Item>
        <ListGroup.Item>
          Ut pretium sollicitudin vehicula. In hac habitasse platea dictumst.
          Morbi fringilla mauris sit amet quam tempor, vulputate consequat dolor
          tempor. Duis magna quam, molestie et velit a, cursus porttitor mi.
          Fusce consectetur faucibus elit ut dictum.
        </ListGroup.Item>
      </ListGroup>
    </div>
  );
}

Now the text is displayed side by side.

We can also set the breakpoint to display horizontally.

For example, we can write:

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

export default function App() {
  return (
    <div>
      {["sm", "md", "lg", "xl"].map((breakpoint, idx) => (
        <ListGroup horizontal={breakpoint} className="my-2" key={idx}>
          <ListGroup.Item>Lorem ipsum dolor sit amet</ListGroup.Item>
          <ListGroup.Item>
            consectetur adipiscing elit. Morbi efficitur massa tellus, non
            ultrices augue sagittis ornare
          </ListGroup.Item>
          <ListGroup.Item>
            Sed ultrices ligula in est tempus tincidunt.
          </ListGroup.Item>
        </ListGroup>
      ))}
    </div>
  );
}

We set the horizontal prop with a breakpoint string so that they items will only display horizontally if we have the given breakpoint and above.

sm is small. md is medium. lg is large. And xl is extra large.

Contextual Classes

We can change the variant of a ListGroup.Item to style it the way we want.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroup.Item>Lorem ipsum </ListGroup.Item>
        <ListGroup.Item variant="primary">Lorem ipsum</ListGroup.Item>
        <ListGroup.Item variant="secondary">Lorem ipsum</ListGroup.Item>
        <ListGroup.Item variant="success">Lorem ipsum</ListGroup.Item>
        <ListGroup.Item variant="danger">Lorem ipsum</ListGroup.Item>
        <ListGroup.Item variant="warning">Lorem ipsum</ListGroup.Item>
        <ListGroup.Item variant="info">Lorem ipsum</ListGroup.Item>
        <ListGroup.Item variant="light">Lorem ipsum</ListGroup.Item>
        <ListGroup.Item variant="dark">Lorem ipsum</ListGroup.Item>
      </ListGroup>
    </div>
  );
}

to show the different styles that come with Bootstrap.

They can be paired with the action prop, then the hover and active styles will be applied:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroup.Item action>Lorem ipsum </ListGroup.Item>
        <ListGroup.Item action variant="primary">
          Lorem ipsum
        </ListGroup.Item>
        <ListGroup.Item action variant="secondary">
          Lorem ipsum
        </ListGroup.Item>
        <ListGroup.Item action variant="success">
          Lorem ipsum
        </ListGroup.Item>
        <ListGroup.Item action variant="danger">
          Lorem ipsum
        </ListGroup.Item>
        <ListGroup.Item action variant="warning">
          Lorem ipsum
        </ListGroup.Item>
        <ListGroup.Item action variant="info">
          Lorem ipsum
        </ListGroup.Item>
        <ListGroup.Item action variant="light">
          Lorem ipsum
        </ListGroup.Item>
        <ListGroup.Item action variant="dark">
          Lorem ipsum
        </ListGroup.Item>
      </ListGroup>
    </div>
  );
}

With the action prop, we’ll see different styles when we highlight over an item.

Conclusion

We can add various styles to list group items.

They can also be displayed horizontally.

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 to a React app with React Bootstrap.

List Groups

List groups are used for displaying a series of content.

We can use them to display many things.

For instance, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroup.Item>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis.
        </ListGroup.Item>
        <ListGroup.Item>
          In euismod egestas dictum. Curabitur vel ipsum in eros commodo egestas
          sed sed augue. In hac habitasse platea dictumst. In pretium massa in
          urna tincidunt vulputate. Duis eget tristique nisi, auctor pharetra
          ex. Duis rhoncus, lectus vitae consequat blandit, lectus sem rhoncus
          lorem, sit amet viverra tortor est in mi.
        </ListGroup.Item>
        <ListGroup.Item>
          Ut pretium sollicitudin vehicula. In hac habitasse platea dictumst.
          Morbi fringilla mauris sit amet quam tempor, vulputate consequat dolor
          tempor. Duis magna quam, molestie et velit a, cursus porttitor mi.
          Fusce consectetur faucibus elit ut dictum. Proin quis elit vel diam
          consectetur accumsan eu in neque. Suspendisse eget magna non tortor
          tincidunt porttitor in sit amet ligula. Aenean turpis arcu, suscipit
          eleifend neque ac.
        </ListGroup.Item>
      </ListGroup>
    </div>
  );
}

to add a list group with a list of text.

Active Items

We can set the active prop to highlight a selected item.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroup.Item active>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis.
        </ListGroup.Item>
        <ListGroup.Item>
          In euismod egestas dictum. Curabitur vel ipsum in eros commodo egestas
          sed sed augue. In hac habitasse platea dictumst. In pretium massa in
          urna tincidunt vulputate. Duis eget tristique nisi, auctor pharetra
          ex. Duis rhoncus, lectus vitae consequat blandit, lectus sem rhoncus
          lorem, sit amet viverra tortor est in mi.
        </ListGroup.Item>
        <ListGroup.Item>
          Ut pretium sollicitudin vehicula. In hac habitasse platea dictumst.
          Morbi fringilla mauris sit amet quam tempor, vulputate consequat dolor
          tempor.
          eleifend neque ac.
        </ListGroup.Item>
      </ListGroup>
    </div>
  );
}

Since we have the active prop on the first ListGroup.Item , the first item is highlighted.

Disabled Items

We can add the disabled prop to prevent actions on ListGroup.Item s.

onClick will be disabled.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroup.Item disabled>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis.
        </ListGroup.Item>
        <ListGroup.Item>
          In euismod egestas dictum. Curabitur vel ipsum in eros commodo egestas
          sed sed augue. In hac habitasse platea dictumst. In pretium massa in
          urna tincidunt vulputate. Duis eget tristique nisi, auctor pharetra
          ex. Duis rhoncus, lectus vitae consequat blandit, lectus sem rhoncus
          lorem, sit amet viverra tortor est in mi.
        </ListGroup.Item>
        <ListGroup.Item>
          Ut pretium sollicitudin vehicula. In hac habitasse platea dictumst.
          Morbi fringilla mauris sit amet quam tempor, vulputate consequat dolor
          tempor. Duis magna quam, molestie et velit a, cursus porttitor mi.
          Fusce consectetur faucibus elit ut dictum.
        </ListGroup.Item>
      </ListGroup>
    </div>
  );
}

to disable the list group item.

Actionable Items

The action prop lets us render list group items as links or buttons.

For instance, we can write:

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

export default function App() {
  const onClick = () => {
    alert("clicked");
  };

return (
    <div>
      <ListGroup>
        <ListGroup.Item action href="#foo">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis.
        </ListGroup.Item>
        <ListGroup.Item action href="#bar">
          In euismod egestas dictum. Curabitur vel ipsum in eros commodo egestas
          sed sed augue. In hac habitasse platea dictumst. In pretium massa in
          urna tincidunt vulputate. Duis eget tristique nisi, auctor pharetra
          ex. Duis rhoncus, lectus vitae consequat blandit, lectus sem rhoncus
          lorem, sit amet viverra tortor est in mi.
        </ListGroup.Item>
        <ListGroup.Item action onClick={onClick}>
          Ut pretium sollicitudin vehicula. In hac habitasse platea dictumst.
          Morbi fringilla mauris sit amet quam tempor, vulputate consequat dolor
          tempor. Duis magna quam, molestie et velit a, cursus porttitor mi.
          Fusce consectetur faucibus elit ut dictum.
        </ListGroup.Item>
      </ListGroup>
    </div>
  );
}

We have the action prop with the href or onClick prop to let us navigate to another page when we click on the link.

Or we can run a click handler if we have onClick .

Conclusion

We can add a list group with items that can do various things.

They can be disabled or rendered as links or buttons.