React Bootstrap — Toasts

Photo by Yukiko Kanada on Unsplash

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.