Reactstrap — Media

Photo by Jeffrey F Lin 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 with Reactstrap.

Media

Media is a container that can hold images and text.

To use it, we import the Media component and 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>
        <Media left href="#">
          <Media object src="http://placekitten.com/200/200" alt="cat" />
        </Media>
        <Media body>
          <Media heading>Media heading</Media>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
          sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
          Vivamus porta est eu auctor sodales. Aliquam et dolor vel augue tempor
          ullamcorper. Etiam velit lacus, blandit at gravida sit amet, pulvinar
          et est. Pellentesque pharetra ultricies magna non vehicula.
          Pellentesque placerat lacus ac tincidunt accumsan. Praesent turpis
          arcu, eleifend id orci vel, rhoncus lobortis magna.
        </Media>
      </Media>
    </div>
  );
}