Category: React Bootstrap

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 work with React Bootstrap’s grid system to create layouts.

Grid System

Bootstrap’s grid system has a series of containers, rows, and columns to let us layout and align content.

It’s built with flexbox and it’s responsive.

Container

We can add a Container compoennt to contain our rows and columns.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col>hello world</Col>
        </Row>
      </Container>
    </>
  );
}

to add our container, row, or column.

Fluid Container

We can add the fluid prop to the Container to make the container 100% across all viewport and device sizes.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Container fluid>
        <Row>
          <Col>hello world</Col>
        </Row>
      </Container>
    </>
  );
}

Ir also takes a value, we can write sm , md , lg , or xl .

This will make the container fluid until the given breakpoint.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Container fluid="md">
        <Row>
          <Col>hello world</Col>
        </Row>
      </Container>
    </>
  );
}

Auto-Layout Columns

We can add multiple rows and columns and they’ll be automatically sized.

Columns will be sized to equal widths.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col>1 </Col>
          <Col>2 </Col>
        </Row>
        <Row>
          <Col>3</Col>
          <Col>4</Col>
          <Col>5</Col>
        </Row>
      </Container>
    </>
  );
}

And we’ll see the first row with 2 equal-sized columns and the 2nd with 3 equal-sized ones.

We can also change the size of some columns.

For instance, we can use the xs prop to change the size of a column if the screen is extra small.

We can write:

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

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs={6}>1 </Col>
          <Col>2 </Col>
        </Row>
        <Row>
          <Col>3</Col>
          <Col>4</Col>
          <Col xs={6}>5</Col>
        </Row>
      </Container>
    </>
  );
}

The other breakpoints can also be used as props for the same purpose.

We can also auto-size some columns and specify the widths for others.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs lg="1">
            1
          </Col>
          <Col md="auto">Variable width</Col>
          <Col xs lg="3">
            2
          </Col>
        </Row>
        <Row>
          <Col>3</Col>
          <Col md="auto">Variable width</Col>
          <Col xs lg="3">
            4
          </Col>
        </Row>
      </Container>
    </>
  );
}

Then left and right columns are fixed sized.

And the middle ones are automatically sized when the specified breakpoint in the prop names are hit.

Responsive Grids

We can make the column responsive by setting the breakpoint props with which breakpoints to show.

For instance sm={true} means the column will show if the sm breakpoint is hit.

We can write:

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

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col sm={5}>foo</Col>
          <Col sm={7}>bar</Col>
        </Row>
        <Row>
          <Col sm>foo</Col>
          <Col sm>bar</Col>
          <Col sm>baz</Col>
        </Row>
      </Container>
    </>
  );
}

And the columns will be resized if the sm breakpoint is hit.

Conclusion

With the React Bootstrap Container , Row , and Col components, we can make layouts easily.

It’s responsive and automatically sized. This is made possible with flexbox.

With these components, we can make any layout we like without much trouble.

We can size columns according to various breakpoints we want to watch for.

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 work with React Bootstrap buttons.

Buttons Basics

React Bootstrap provides us with multiple styles of buttons.

We can change the style with the variant prop.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Button variant="primary">button</Button>{" "}
      <Button variant="link">Link</Button>
    </>
  );
}

We have different varieties of buttons with different background colors.

variant has the background color of the button.

If the variant is link , then it’s displayed as a link.

Button Sizes

We can change the size with the size prop.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <div>
        <Button variant="primary" size="lg">
          Large
        </Button>{" "}
        <Button variant="secondary" size="lg">
          Large
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm">
          Small
        </Button>{" "}
        <Button variant="secondary" size="sm">
          Small
        </Button>
      </div>
    </>
  );
}

We set the size to lg to create a large button.

And we set the size to sm to create a small button.

Also, we can add the block prop to make them display as a block-level element.

For example, we can write:

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

export default function App() {
  return (
    <>
      <div>
        <Button variant="primary" size="lg" block>
          Large button
        </Button>{" "}
        <Button variant="secondary" size="lg" block>
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm" block>
          Small button
        </Button>{" "}
        <Button variant="secondary" size="sm" block>
          Small button
        </Button>
      </div>
    </>
  );
}

Then they all take up the whole row.

Active State

We can set the active to make them display in a different style to indicate that they’re active.

For example, we can write:

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

export default function App() {
  return (
    <>
      <div>
        <Button variant="primary" size="lg" active>
          Large button
        </Button>{" "}
        <Button variant="secondary" size="lg" active>
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm" active>
          Small button
        </Button>{" "}
        <Button variant="secondary" size="sm" active>
          Small button
        </Button>
      </div>
    </>
  );
}

Disabled State

To make the buttons disabled, we can add the disable prop to the Button .

For example, we can write:

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

export default function App() {
  return (
    <>
      <div>
        <Button variant="primary" size="lg" disabled>
          Large button
        </Button>{" "}
        <Button variant="secondary" size="lg" disabled>
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm" disabled>
          Small button
        </Button>{" "}
        <Button variant="secondary" size="sm" disabled>
          Small button
        </Button>
      </div>
    </>
  );
}

Now they’re all disabled since we added the disabled prop.

If the button is rendered as an a element, then pointer-events: none is used to disable the link.

Button Loading State

We can set the loading state of a button.

To do that, we just set the props that we described above and the text content to indicate that it’s loading.

For instance, we can write:

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

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

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 6000);

    return () => {
      clearTimeout(timer);
    };
  }, [isLoading]);

  return (
    <Button
      variant="primary"
      disabled={isLoading}
      onClick={isLoading => setLoading(true)}
    >
      {isLoading ? "Loading…" : "Click to load"}
    </Button>
  );
}

We have a button that sets the isLoading state to true when it’s clicked.

This will also change the text to ‘Loading…’.

We also have the useEffect callback to set the isLoading state to false after 6 seconds.

The button is disabled with isLoading is true so that the user can’t click anything when the button is clicked.

Conclusion

We can set the disabled , size , and variant props for the buttons.

They let us change the disabled state, size and style respectively.

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 customize React Bootstrap carousels and dropdowns.

Carousels

Carousels are slideshow components that let us cycle through elements.

The slides can have images or text.

For example, we can use them by writing:

import React from "react";
import Card from "react-bootstrap/Card";
import Carousel from "react-bootstrap/Carousel";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              ultrices ac dolor nec vestibulum.{" "}
            </p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide</h3>
            <p>
              Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
              porttitor,
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </>
  );
}

We imported the Carousel component, which has the Carousel.Item to display the item.

Inside it, we can display an image.

Also, we can add a caption for the image with the Carousel.Caption component.

We can have anything inside the caption.

Controlled Slides

We can control the carousel state using th activeIndex and onSelect handler.

For example, we can write:

import React from "react";
import Carousel from "react-bootstrap/Carousel";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  const [index, setIndex] = React.useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

return (
    <>
      <Carousel activeIndex={index} onSelect={handleSelect}>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              ultrices ac dolor nec vestibulum.{" "}
            </p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="Third slide"
          />

<Carousel.Caption>
            <h3>Second slide</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="Third slide"
          />

<Carousel.Caption>
            <h3>Third slide</h3>
            <p>
              Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
              porttitor,
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
      <p>{index}</p>
    </>
  );
}

We have the index state and the setIndex function to change it.

Then we pass index as the value of the activeIndex prop to let us set the slide to go to.

onSelect has the handleSelect function as the value to let us set the index when carousel navigation is done.

We then display the index of the current slide below the carousel.

Dropdowns

We can add dropdowns to our React app with the Dropdown component.

For instance, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Dropdown>
        <Dropdown.Toggle variant="primary">Dropdown Button</Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item href="#/foo">foo</Dropdown.Item>
          <Dropdown.Item href="#/bar">bar</Dropdown.Item>
          <Dropdown.Item href="#/baz">baz</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We have the Dropdown component that has the Dropdown.Toggle component to show the toggle.

Dropdown.Menu shows the menu when the toggle is clicked.

href can have any URL that we want to go to.

variant is the styling variant.

To make it shorter, we can use the DropdownButton component to combine the Dropdown and Dropdown.Toggle component into one.

For example, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <DropdownButton title="Dropdown button">
        <Dropdown.Item href="#/foo">foo</Dropdown.Item>
        <Dropdown.Item href="#/bar">bar</Dropdown.Item>
        <Dropdown.Item href="#/baz">baz</Dropdown.Item>
      </DropdownButton>
    </>
  );
}

The title prop has the text content of the toggle.

The Dropdown.Toggle and the Dropdown.Menu wrapper are eliminated because we have the Dropdown.button component.

Styling Variants

We can set the variant prop to change the styles of the dropdown.

For instance, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      {["Primary", "Secondary", "Success", "Info", "Warning", "Danger"].map(
        variant => (
          <DropdownButton
            as={ButtonGroup}
            key={variant}
            variant={variant.toLowerCase()}
            title={variant}
          >
            <Dropdown.Item eventKey="1">foo</Dropdown.Item>
            <Dropdown.Item eventKey="2">bar</Dropdown.Item>
            <Dropdown.Item eventKey="3" active>
              Active Item
            </Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item eventKey="4">baz</Dropdown.Item>
          </DropdownButton>
        )
      )}
    </>
  );
}

to display the dropdown with all the colors.

Conclusion

Carousels are slideshows with text and images in the slides.

Dropdowns can have many varieties.

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 toasts with React Bootstrap.

Toast

Toasts are popup notifications that are displayed to show users some information.

We can add it with the Toast component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

We have the Toast component that has various components.

Toast.Header has the header.

It has an image inside.

Toast.Body has the toast body.

This will always show since we have no code to close the modal.

Dismissible

We can make a toast dismissible by setting the show state to control when it shows.

The onClose prop lets us run code to dismiss the toast.

For example, we can write:

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

export default function App() {
  const [show, setShow] = React.useState(true);
  const toggleShow = () => setShow(!show);

  return (
    <div className="App">
      <Toast show={show} onClose={toggleShow}>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

to let us close the toast with the close button on the top right.

We can disable animation with the animation prop set to false .

For example, we can write:

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

export default function App() {
  const [show, setShow] = React.useState(true);
  const toggleShow = () => setShow(!show);

  return (
    <div className="App">
      <Toast show={show} onClose={toggleShow} animation={false}>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

Then we disable the animation when we open and close the toast.

Stacking

When we have multiple toasts, then they’re stacked on top of each other.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>

      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/49/49"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title 2</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Pellentesque tincidunt nisi quis nunc fringilla viverra.
        </Toast.Body>
      </Toast>
    </div>
  );
}

to show 2 toasts one on top of each other.

Autohide

We can add the delay prop to hide the toast after a given number of milliseconds.

We’ve to add this with the autohide property to make it hide automatically.

For instance, we can write:

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

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

  return (
    <div className="App">
      <Toast show={show} onClose={() => setShow(false)} delay={3000} autohide>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

We have the delay prop to 3000 to close the toast after 3 seconds.

autohide lets us auto-hide the toast after the time is up.

Also, we’ve to add the close and onClose props to control the opening and closing of the toast.

Conclusion

We can add a toast easily with the Toast component.

It can contain any styles and we can change the placement.

Also, it can be auto-closed.

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 work with React Bootstrap’s media objects to add complex and repetitive components.

Media Order

We can flip the image and the content within the Media component.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Media>
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
        </Media.Body>
        <img
          width={64}
          height={64}
          className="ml-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
      </Media>
    </>
  );
}

to place the image on the right instead of the left.

Media List

To make the Media component display as a list, we can add the as='li' prop to our Media component.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <ul className="list-unstyled">
        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/200/200"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 1</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
              tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
              eget lectus a ante convallis gravida. Donec fringilla odio ut
              magna gravida aliquam. Cras molestie non ante vel dictum. Cras
              lacinia molestie lacus, in lacinia sapien imperdiet in. Sed
              eleifend laoreet finibus. Integer semper dictum eros nec eleifend.
              Nunc quam mi, finibus lacinia metus vitae, dapibus ultricies diam.
              Vivamus ante nisi, pellentesque at lacus eu, vehicula pretium
              lorem. Nunc vitae ligula laoreet, accumsan diam et, auctor mauris.
              Fusce vitae posuere nibh, vitae eleifend quam. Duis a enim lacus.
            </p>
          </Media.Body>
        </Media>

        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/189/189"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 2</h2>
            <p>
              Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
              porttitor, ornare ex et, finibus ante. Aenean mattis ligula
              lectus, a aliquet est pharetra et. Donec sit amet est massa.
              Maecenas dolor ante, congue sit amet mattis eu, vehicula quis
              nisl. Nulla viverra ligula vitae mollis sagittis. Fusce volutpat
              convallis purus. Vestibulum tincidunt elit id aliquam placerat.
              Vivamus vestibulum enim sed eros ullamcorper congue. Fusce nec
              tincidunt arcu. Sed sed suscipit justo, ac eleifend mauris. Morbi
              molestie turpis a accumsan mollis. Aenean vel diam vitae ante
              tincidunt varius.
            </p>
          </Media.Body>
        </Media>

        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/188/188"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 3</h2>
            <p>
              Ut scelerisque tellus sit amet magna venenatis, sit amet auctor
              est mollis. Nunc aliquet ipsum neque, vel tincidunt dolor vehicula
              nec. Praesent placerat mattis mi, vitae sollicitudin tortor
              viverra vel. Etiam non auctor ante, eu vehicula mi. Donec non
              imperdiet ligula. Sed quam massa, placerat quis venenatis ut,
              aliquam quis tortor. Ut vulputate nunc non enim commodo, vitae
              lobortis sapien tincidunt. Quisque imperdiet augue eu tincidunt
              venenatis. Nunc porttitor a sem quis volutpat. Integer eget
              ultrices nisi. Nunc placerat erat quis enim fermentum pharetra.
              Morbi consequat tortor eget iaculis cursus. Pellentesque vitae
              ligula non dolor porttitor rhoncus quis et erat.
            </p>
          </Media.Body>
        </Media>
      </ul>
    </>
  );
}

We added multiple Media components.

And with the as='li' prop on each, they’re rendered as li elements.

So we can put them inside a ul element.

Conclusion

We can switch the order of a media component.

Also, we can render them as li components so that they can be displayed on a list.