Reactstrap — List Group Content

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add custom list group content with Reactstrap.

Custom Content

We can add custom content to our list group items.

For instance, we can write:

import React from "react";
import {
  ListGroup,
  ListGroupItem,
  ListGroupItemHeading,
  ListGroupItemText
} from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <ListGroup>
        <ListGroupItem active>
          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
          <ListGroupItemText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </ListGroupItemText>
        </ListGroupItem>
        <ListGroupItem>
          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
          <ListGroupItemText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </ListGroupItemText>
        </ListGroupItem>
        <ListGroupItem>
          <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
          <ListGroupItemText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </ListGroupItemText>
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

We use the ListGroupItemHeading and ListGroupItemText to add our content and main text for list group items respectively.

Flush

To remove the border of the list group, we can add the flush prop to the list group.

For example, we can write:

import React from "react";
import { ListGroup, ListGroupItem } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <ListGroup flush>
        <ListGroupItem disabled tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

We have the flush prop of the ListGroup to remove the border.

Horizontal List Groups

We can make the items laid out horizontally instead of vertically.

We just have to add a horizontal prop to do this.

Also, we can set the breakpoint as the value to only turn horizontal given a breakpoint.

For example, we can write:

import React from "react";
import { ListGroup, ListGroupItem } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <ListGroup horizontal>
        <ListGroupItem disabled tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

to make it always horizontal.

And we can write:

import React from "react";
import { ListGroup, ListGroupItem } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <ListGroup horizontal="lg">
        <ListGroupItem disabled tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
        <ListGroupItem tag="a" href="#">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

to make it horizontal only when the screen hits the lg breakpoint or wider.

Conclusion

We can add custom content and change the layout of list groups.