Reactstrap — Media List and Modals

Photo by rafzin p on Unsplash

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 media lists with Reactstrap.

Media List

We can add the list prop to the Media component to make it a list.

For example, we can write:

import React from "react";
import { Media } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <div className="App">
      <Media list>
        <Media tag="li">
          <Media left href="#">
            <Media object src="http://placekitten.com/201/201" alt="cat" />
          </Media>
          <Media body>
            <Media heading>Media heading</Media>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <Media>
              <Media left href="#">
                <Media object src="http://placekitten.com/201/201" alt="cat" />
              </Media>
              <Media body>
                <Media heading>Nested media heading</Media>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <Media>
                  <Media left href="#">
                    <Media
                      object…