Color Variants Live
<Toast id="primaryToast" bg="primary-transparent" className="toast colored-toast"
onClose={() => setShow1(false)} show={show1} delay={3000} autohide
aria-atomic="true">
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="secondaryToast" className="toast colored-toast bg-secondary-transparent" role="alert" aria-live="assertive"
aria-atomic="true" onClose={() => setShow2(false)} show={show2} delay={3000} autohide>
<Toast.Header className="toast-header bg-secondary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="warningToast" className="toast colored-toast bg-warning-transparent" role="alert" aria-live="assertive"
onClose={() => setShow3(false)} show={show3} delay={3000} autohide
aria-atomic="true">
<Toast.Header className="toast-header bg-warning text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="infoToast" className="toast colored-toast bg-info-transparent" role="alert" aria-live="assertive"
onClose={() => setShow4(false)} show={show4} delay={3000} autohide
aria-atomic="true">
<Toast.Header className="bg-info text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="successToast" className="toast colored-toast bg-success-transparent" role="alert" aria-live="assertive"
onClose={() => setShow5(false)} show={show5} delay={3000} autohide
aria-atomic="true">
<Toast.Header className="bg-success text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="dangerToast" className="toast colored-toast bg-danger-transparent" role="alert" aria-live="assertive"
onClose={() => setShow6(false)} show={show6} delay={3000} autohide
aria-atomic="true">
<Toast.Header className="toast-header bg-danger text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>Solid Background Toasts
<ToastContainer className="toast-container position-fixed top-0 end-0 p-3">
<Toast id="solid-primaryToast" className="toast colored-toast bg-primary text-fixed-white"
onClose={() => setShow7(false)} show={show7} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="solid-secondaryToast" className="toast colored-toast bg-secondary text-fixed-white"
onClose={() => setShow8(false)} show={show8} delay={3000} autohide
aria-atomic="true">
<Toast.Header className="toast-header bg-secondary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="solid-warningToast" className="toast colored-toast bg-warning text-fixed-white"
onClose={() => setShow9(false)} show={show9} delay={3000} autohide>
<Toast.Header className="toast-header bg-warning text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="solid-infoToast" className="toast colored-toast bg-info text-fixed-white"
onClose={() => setShow10(false)} show={show10} delay={3000} autohide>
<Toast.Header className="toast-header bg-info text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="solid-successToast" className="toast colored-toast bg-success text-fixed-white"
onClose={() => setShow11(false)} show={show11} delay={3000} autohide>
<Toast.Header className="toast-header bg-success text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
<Toast id="solid-dangerToast" className="toast colored-toast bg-danger text-fixed-white"
onClose={() => setShow12(false)} show={show12} delay={3000} autohide>
<Toast.Header className="toast-header bg-danger text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body>
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>Toast Placements
<ToastContainer className="toast-container position-fixed top-0 start-0 p-3">
<Toast id="topleft-Toast" className="toast colored-toast bg-primary-transparent text-primary"
onClose={() => setShow13(false)} show={show13} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
<button type="button" className="btn-close" data-bs-dismiss="toast"
aria-label="Close"></button>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>
<ToastContainer className="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
<Toast id="topcenter-Toast" className="toast colored-toast bg-primary-transparent text-primary" onClose={() => setShow14(false)} show={show14} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>
<ToastContainer className="toast-container position-fixed top-0 end-0 p-3">
<Toast id="topright-Toast" className="toast colored-toast bg-primary-transparent text-primary"
onClose={() => setShow15(false)} show={show15} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>
<ToastContainer className="toast-container position-fixed top-50 start-0 translate-middle-y p-3">
<Toast id="middleleft-Toast" className="toast colored-toast bg-primary-transparent text-primary"
onClose={() => setShow16(false)} show={show16} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>
<ToastContainer className="toast-container position-fixed top-50 start-50 translate-middle">
<Toast id="middlecenter-Toast" className="toast colored-toast bg-primary-transparent text-primary"
onClose={() => setShow17(false)} show={show17} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>
<ToastContainer className="toast-container position-fixed top-50 end-0 translate-middle-y p-3">
<Toast id="middleright-Toast" className="toast colored-toast bg-primary-transparent text-primary"
onClose={() => setShow18(false)} show={show18} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>
<ToastContainer className="toast-container position-fixed bottom-0 start-0 p-3">
<Toast id="bottomleft-Toast" className="toast colored-toast bg-primary-transparent text-primary"
onClose={() => setShow19(false)} show={show19} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>
<ToastContainer className="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<Toast id="bottomcenter-Toast" className="toast colored-toast bg-primary-transparent text-primary"
onClose={() => setShow20(false)} show={show20} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>
<ToastContainer className="toast-container position-fixed bottom-0 end-0 p-3">
<Toast id="bottomright-Toast" className="toast colored-toast bg-primary-transparent text-primary"
onClose={() => setShow21(false)} show={show21} delay={3000} autohide>
<Toast.Header className="toast-header bg-primary text-fixed-white">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/toggle-dark.png"} alt="..."/>
<strong className="me-auto">Spruha</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>Live example
<Button type="button" className="btn btn-primary btn-wave" id="liveToastBtn" onClick={() => setShow(true)}>Show live
toast</Button>
<Toast className="toast-container position-fixed top-0 end-0 p-3" onClose={() => setShow(false)} show={show} delay={3000} autohide>
<Toast.Header className="toast-header text-default">
<img className="bd-placeholder-img rounded me-2" src={"../../../assets/images/brand-logos/favicon.ico"} alt="..."/>
<strong className="me-auto">Spruha</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body className="toast-body">
Hello, world! This is a toast message.
</Toast.Body>
</Toast>Color schemes
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.
<Toast className="toast align-items-center text-bg-primary border-0 fade show mb-4" show={showC}>
<div className="d-flex">
<Toast.Body className=" text-fixed-white" >
Hello, world! This is a toast message.</Toast.Body>
<CloseButton aria-label="Close" variant=''
className="btn-close btn-close-white me-2 m-auto"
onClick={toggleShowC}></CloseButton>
</div></Toast>
<Toast className="toast align-items-center text-bg-secondary border-0 fade show mb-4" show={showC}>
<div className="d-flex">
<Toast.Body className=" text-fixed-white" >
Hello, world! This is a toast message. </Toast.Body>
<CloseButton aria-label="Close" variant=''
className="btn-close btn-close-white me-2 m-auto"
onClick={toggleShowC}></CloseButton>
</div></Toast>
<Toast className="toast align-items-center text-bg-success border-0 fade show mb-4" show={showC}>
<div className="d-flex">
<Toast.Body className=" text-fixed-white" >
Hello, world! This is a toast message. </Toast.Body>
<CloseButton aria-label="Close" variant=''
className="btn-close btn-close-white me-2 m-auto"
onClick={toggleShowC}></CloseButton>
</div></Toast>
<Toast className="toast align-items-center text-bg-info border-0 fade show mb-4" show={showC}>
<div className="d-flex">
<Toast.Body className=" text-fixed-white" >
Hello, world! This is a toast message. </Toast.Body>
<CloseButton aria-label="Close" variant=''
className="btn-close btn-close-white me-2 m-auto"
onClick={toggleShowC}></CloseButton>
</div></Toast>Basic example
Spruha11 mins ago Hello, world! This is a toast message.
<Toast show={showA} onClose={toggleShowA} className="toast show"
role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<Toast.Header>
<img src={"../../../assets/images/brand-logos/favicon.ico"} alt="" className="me-2" height="18" />
<strong className="me-auto">Spruha</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body> Hello, world! This is a toast message.</Toast.Body>
</Toast>Stacking
Spruhajust now See? Just like this.
Spruha2 seconds ago Heads up, toasts will stack automatically
<Toast show={showA} onClose={toggleShowA} className="toast show"
role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<Toast.Header>
<img src={"../../../assets/images/brand-logos/favicon.ico"} alt="" className="me-2" height="18" />
<strong className="me-auto">Spruha</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body> Hello, world! This is a toast message.</Toast.Body>
</Toast>Translucent
Spruha11 mins ago Hello, world! This is a toast message.
<Toast show={showA} onClose={toggleShowA} className="toast show"
role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<Toast.Header>
<img src={"../../../assets/images/brand-logos/favicon.ico"} alt="" className="me-2" height="18" />
<strong className="me-auto">Spruha</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body> Hello, world! This is a toast message.</Toast.Body>
</Toast>Custom content
Hello, world! This is a toast message.
Alternatively, you can also add additional controls and components to toasts.
Hello, world! This is a toast message.
<Toast role="alert"
className="toast align-items-center fade show mb-3" show={showI}>
<div className="d-flex">
<Toast.Body className="text-dark">Hello, world! This is a toast message.
</Toast.Body>
<CloseButton type="button" className="btn-close me-2 m-auto"
onClick={toggleShowI}>
</CloseButton>
</div>
</Toast>
<div>
<span className="my-4 text-muted">
Alternatively, you can also add additional controls and components to
toasts.
</span>
</div>
<Toast className="toast fade show mt-2" show={showJ}>
<Toast.Body>
Hello, world! This is a toast message.
<div className="mt-2 pt-2 border-top">
<Button type="button" className="btn btn-primary btn-sm btn-wave">Take
action</Button>
<Button type="button" className="btn btn-secondary btn-sm btn-wave"
onClick={toggleShowJ}>Close</Button>
</div>
</Toast.Body>
</Toast>Aligning Toast Using Flexbox
Spruha11 mins ago Hello, world! This is a toast message.
<Toast show={showK} onClose={toggleShowK} className="toast fade show shadow-lg">
<Toast.Header className="text-default">
<img src={"../../../assets/images/brand-logos/favicon.ico"} alt=""className="bd-placeholder-img rounded me-2" />
<strong className="me-auto">Spruha</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body> Hello, world! This is a toast message.</Toast.Body>
</Toast>