React Bootstrap — List Groups

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.