Toasts
Basic Toasts
![](../../../assets/images/brand/icon-dark.png)
Hello, world! This is a toast message.
export function Basictoast() {
const [showA, setShowA] = useState(true);
const toggleShow = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShow}>
<Toast.Header>
<img src={"../../../assets/images/brand/icon-dark")} alt="" className="me-2" height="18"/>
<strong className="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
<Col md={12} className="mt-2 mt-md-0">
<Button variant="primary" className="mt-5" onClick={toggleShow}>Show live toast</Button>
</Col>
</div>
);
}
Translucent Toasts
![](../../../assets/images/brand/icon-dark.png)
Hello, world! This is a toast message.
export function Translucenttoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<Toast.Header>
<img src={"../../../assets/images/brand/icon-dark")} alt="" className="me-2" height="18"/>
<strong className="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
</div>
);
}
Custom content Toasts
Hello, world! This is a toast message.
Hello, world! This is a toast message.
export function CustomContenttoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<Toast.Header>
<strong className="me-auto">Hello, world! This is a toast message.</strong>
</Toast.Header>
</Toast>
</div>
);
}
export function Customtoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<ToastHeader className='justify-content-between'>
Hello, world! This is a toast message.
</ToastHeader>
<Toast.Body className="mt-2 pt-2">
<Button size="sm" variant="primary me-1">Take Action</Button>
<Button size="sm" variant="secondary" onClick={() => setShowA(false)}>
Close
</Button>
</Toast.Body>
</Toast>
</div>
);
}
Color Toasts
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
export function ColourAtoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<Toast.Header className="bg-primary text-white">
<strong className="me-auto">Hello, world! This is a toast message.</strong>
</Toast.Header>
</Toast>
</div>
);
}
export function ColourBtoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<Toast.Header className="bg-secondary text-white">
<strong className="me-auto">Hello, world! This is a toast message.</strong>
</Toast.Header>
</Toast>
</div>
);
}
export function ColourCtoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<Toast.Header className="bg-success text-white">
<strong className="me-auto">Hello, world! This is a toast message.</strong>
</Toast.Header>
</Toast>
</div>
);
}
export function ColourDtoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<Toast.Header className="bg-danger text-white">
<strong className="me-auto">Hello, world! This is a toast message.</strong>
</Toast.Header>
</Toast>
</div>
);
}
Stacking Toasts
![](../../../assets/images/brand/icon-dark.png)
See? Just like this.
![](../../../assets/images/brand/icon-dark.png)
Heads up, toasts will stack automatically
export function StackingAtoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA} >
<Toast.Header>
<img src={"../../../assets/images/brand/icon-dark")} alt="" className="me-2" height="18"/>
<strong className="me-auto">Bootstrap</strong>
<small className="text-muted">just now</small>
</Toast.Header>
<Toast.Body>See? Just like this.</Toast.Body>
</Toast>
</div>
);
}
export function StackingBtoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<Toast.Header>
<img src={"../../../assets/images/brand/icon-dark")} alt="" className="me-2" height="18"/>
<strong className="me-auto">Bootstrap</strong>
<small className="text-muted">2 seconds ago</small>
</Toast.Header>
<Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
</Toast>
</div>
);
}
Placement Toast
![](../../../assets/images/brand/icon-dark.png)
Hello, world! This is a toast message.
export function Placementtoast() {
const [showA, setShowA] = useState(true);
const toggleShowA = () => setShowA(!showA);
return (
<div>
<Toast show={showA} onClose={toggleShowA}>
<Toast.Header>
<img src={"../../../assets/images/brand/icon-dark")} alt="" className="me-2" height="18"/>
<strong className="me-auto">Bootstrap</strong>
<small className="text-muted">11 mins ago</small>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
</div>
);
}