React Bootstrap — List Groups Styling

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.