Live example
<Button type="button" className="btn btn-primary btn-wave" id="liveToastBtn" onClick={() => setShow(true)}>Show live
toast</Button>
<Toast className="position-fixed top-0 end-0 p-3 me-4 mt-4 toast-zindex" onClose={() => setShow(false)} show={show} delay={3000} autohide>
<Toast.Header className="toast-header text-default">
<img className="bd-placeholder-img rounded me-2" src={favicon} alt="..."/>
<strong className="me-auto">Ynex</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 the Primary toast message.
Hello, world! This is the Secondary toast.
Hello, world! This is the Success toast message.
Hello, world! This is the info 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-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-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-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-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
Ynex11 mins agoHello, 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={favicon} alt="" className="me-2" height="18" />
<strong className="me-auto">Ynex</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body> Hello, world! This is a toast message.</Toast.Body>
</Toast>Stacking
Ynexjust nowSee? Just like this.
Ynex2 seconds agoHeads 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={favicon} alt="" className="me-2" height="18" />
<strong className="me-auto">Ynex</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body> Hello, world! This is a toast message.</Toast.Body>
</Toast>Translucent
Ynex11 mins agoHello, 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={favicon} alt="" className="me-2" height="18" />
<strong className="me-auto">Ynex</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>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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</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={toggledark} alt="..."/>
<strong className="me-auto">Ynex</strong>
</Toast.Header>
<Toast.Body className="toast-body">
Your,toast message here.
</Toast.Body>
</Toast>
</ToastContainer>Aligning Toast Using Flexbox
Ynex11 mins agoHello, world! This is a toast message.
<Toast show={showK} onClose={toggleShowK} className="toast fade show shadow-lg">
<Toast.Header className="text-default">
<img src={favicon} alt=""className="bd-placeholder-img rounded me-2" />
<strong className="me-auto">Ynex</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body> Hello, world! This is a toast message.</Toast.Body>
</Toast>