Reactstrap — Layouts and List Groups

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 layouts with Reactstrap.

Container

Containers are used to hold content for layouts.

We can add them by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container } from "reactstrap";

export default function App() {
  return (
    <div>
      <Container>.container</Container>
      <Container fluid="sm">.container-sm</Container>
      <Container fluid="md">.container-md</Container>
      <Container fluid="lg">.container-lg</Container>
      <Container fluid="xl">.container-xl</Container>
      <Container fluid={true}>.container-fluid</Container>
    </div>
  );
}

We add the Container components and we can make them fluid when certain breakpoints are hit with the fluid prop.

If we specify the breakpoint, then it’ll be fluid if the screen is at the breakpoint or narrower.

If it’s true , then it’s always fluid.

Row Columns

We can add rows and columns inside containers to layout content.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";

export default function App() {
  return (
    <div>
      <Container>
        <Row xs="2">
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
        </Row>
        <Row xs="3">
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
        </Row>
      </Container>
    </div>
  );
}

We specify how many columns can be one row given the breakpoint or higher with the breakpoint prop.

So xs='2' means that we have 2 columns if the screen hits the xs breakpoint or wider.

We can also specify multiple breakpoint props:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";

export default function App() {
  return (
    <div>
      <Container>
        <Row xs="1" sm="2" md="4">
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
          <Col>Column</Col>
        </Row>
      </Container>
    </div>
  );
}

xs='1' means that we have 1 column per row if the breakpoint is xs or narrower.

sm='2' means that we have 2 columns per row if the breakpoint is sm or narrower.

md='4' means we have 4 columns per row if the breakpoint is md or narrow.

The props with the narrower breakpoints override the wider ones.

List Group

List groups let us add lists of items.

For example, we can use the ListGroup and ListGroupItem components as follows:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroupItem>Lorem ipsum dolor sit amet</ListGroupItem>
        <ListGroupItem>consectetur adipiscing elit</ListGroupItem>
        <ListGroupItem>Nunc non egestas velit</ListGroupItem>
        <ListGroupItem>sed pretium sapien</ListGroupItem>
        <ListGroupItem>Vestibulum at eros</ListGroupItem>
      </ListGroup>
    </div>
  );
}

Tags

We can add badges to display tags.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroupItem>
          Lorem ipsum dolor sit amet <Badge pill>11</Badge>
        </ListGroupItem>
        <ListGroupItem>
          consectetur adipiscing elit <Badge pill>12</Badge>
        </ListGroupItem>
        <ListGroupItem>
          Nunc non egestas velit <Badge pill>13</Badge>
        </ListGroupItem>
        <ListGroupItem>
          sed pretium sapien <Badge pill>14</Badge>
        </ListGroupItem>
        <ListGroupItem>
          Vestibulum at eros <Badge pill>15</Badge>
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

We use the Badge component to add tags to display them beside the text.

Disabled Items

We can make items disabled by writing:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroupItem disabled tag="a" href="#" `action`>
          Lorem ipsum dolor sit amet
        </ListGroupItem>
        <ListGroupItem tag="a" href="#" `action`>
          consectetur adipiscing elit
        </ListGroupItem>
        <ListGroupItem tag="a" href="#" `action`>
          Nunc non egestas velit
        </ListGroupItem>
        <ListGroupItem tag="a" href="#" `action`>
          sed pretium sapien
        </ListGroupItem>
        <ListGroupItem tag="a" href="#" `action`>
          Vestibulum at eros
        </ListGroupItem>
      </ListGroup>
    </div>
  );
}

The tag prop lets us render the list group item as an anchor element.

href is the same one for an anchor element.

The disabled prop lets us disable clicking on it.

The action prop make the buttons fit the list.

Anchors and Buttons

List group items can be rendered as buttons also.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <ListGroup>
        <ListGroupItem disabled tag="button">
          Lorem ipsum dolor sit amet
        </ListGroupItem>
        <ListGroupItem tag="button">consectetur adipiscing elit</ListGroupItem>
        <ListGroupItem tag="button">Nunc non egestas velit</ListGroupItem>
        <ListGroupItem tag="button">sed pretium sapien</ListGroupItem>
        <ListGroupItem tag="button">Vestibulum at eros</ListGroupItem>
      </ListGroup>
    </div>
  );
}

to set the tag prop as button and render them as buttons.

Conclusion

Containers let us add layouts to our pages.

List groups let us display items in lists.