React Bootstrap — Toasts
3 min readOct 3, 2020
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.