Basic Alert
Holy guacamole! You should check in on some of those fields below.
<div className="alert alert-warning alert-dismissible fade show" role="alert" show={show}
onClick={toggleShow}><strong>Holy guacamole!</strong> You should check in on some of those fields below.
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close">
<i className="bi bi-x"></i></Button>
</div>Live example
<div id="liveAlertPlaceholder">
<div className="mb-2"></div>
<div className="mb-2"></div>
<div className="mb-2"></div>
<div className="mb-2"></div>
</div>
<button type="button" className="btn btn-primary" id="liveAlertBtn">Show live
alert
</button>Default alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<div className=" alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div className=" alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div className=" alert-success" role="alert">
A simple success alert—check it out!
</div>
<div className=" alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div className=" alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div className=" alert-info" role="alert">
A simple info alert—check it out!
</div>
<div className=" alert-light" role="alert">
A simple light alert—check it out!
</div>
<div className=" alert-dark" role="alert">
A simple dark alert—check it out!
</div>Links in alerts
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
<div className="alert alert-primary" role="alert"></div>;
A simple primary alert with <a> href="#!" className="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div className="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#!" className="alert-link">an example
link</a>. Give it a click if you like.
</div>
<div className="alert alert-success" role="alert">
A simple success alert with <a href="#!" className="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div className="alert alert-danger" role="alert">
A simple danger alert with <a href="#!" className="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div className="alert alert-warning" role="alert">
A simple warning alert with <a href="#!" className="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div className="alert alert-info" role="alert">
A simple info alert with <a href="#!" className="alert-link">an example link</a>.
Give it a click if you like.
</div>
<div className="alert alert-light" role="alert">
A simple light alert with <a href="#!" className="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div className="alert alert-dark" role="alert">
A simple dark alert with <a href="#!" className="alert-link">an example link</a>.
Give it a click if you like.
</divSolid Colored Alerts
A simple solid primary alert-check it out!
A simple solid secondary alert-check it out!
A simple solid info alert-check it out!
A simple solid warning alert-check it out!
A simple solid success alert-check it out!
A simple solid danger alert-check it out!
A simple solid light alert-check it out!
A simple solid dark alert-check it out!
{solidalert.map((idx:any ,alt3:any)=>(
<Alert variant={idx.class} className="alert alert-dismissible fade show" key={alt3}>
{idx.text}
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"
onClick={() => handleRemove(idx.id)}><i className="bi bi-x"></i></Button>
</Alert>
))}
Outline Alerts
A simple outline primary alert-check it out!
A simple outline secondary alert-check it out!
A simple outline info alert-check it out!
A simple outline warning alert-check it out!
A simple outline success alert-check it out!
A simple outline danger alert-check it out!
A simple outline light alert-check it out!
A simple outline dark alert-check it out!
{outlinealert.map((idx:any, alt4:any)=>(
<Alert variant={idx.class} className="alert alert- alert-dismissible fade show" key={alt4}>
{idx.text}
<Button variant='' type="button" className="btn-close"
onClick={() => handleRemove1(idx.id)} data-bs-dismiss="alert" aria-label="Close"><i className="bi bi-x"></i></Button>
</Alert>
))}
Solid Alerts With Different Shadows
A simple solid primary alert with small shadow—check it out!
A simple solid primary alert with normal shadow—check it out!
A simple solid primary alert with large shadow—check it out!
A simple solid secondary alert with small shadow—check it out!
A simple solid secondary alert with normal shadow—check it out!
A simple solid secondary alert with large shadow—check it out!
<Alert variant='solid-primary' className="alert shadow alert-dismissible fade show">
A simple solid primary alert with normal shadow—check it out!
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"><i className="bi bi-x"></i></Button>
</Alert>
<Alert variant='solid-primary' className="alert shadow-lg alert-dismissible fade show">
A simple solid primary alert with large shadow—check it out!
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"><i className="bi bi-x"></i></Button>
</Alert>
Default Alerts With Different Shadows
A simple primary alert with small shadow—check it out!
A simple primary alert with small shadow—check it out!
A simple primary alert with small shadow—check it out!
A simple primary alert with small shadow—check it out!
A simple primary alert with small shadow—check it out!
A simple primary alert with small shadow—check it out!
<Alert variant='primary' className="alert shadow">A simple primary alert with normal shadow—check it out!</Alert>
<Alert variant='primary' className="alert shadow-lg">A simple primary alert with large shadow—check it out!</Alert>
<Alert variant='secondary' className="alert shadow-sm">A simple secondary alert with small shadow—check it out!</Alert>
<Alert variant='secondary' className="alert shadow">A simple secondary alert with normal shadow—check it out!</Alert>
<Alert variant='secondary' className="alert shadow-lg">A simple secondary alert with large shadow—check it out!</Alert>
Rounded Solid Alerts
A simple solid rounded primary alert—check it out!
A simple solid rounded secondary alert—check it out!
A simple solid rounded warning alert—check it out!
A simple solid rounded danger alert—check it out!
{roundedsolidalert.map((idx:any,alt7:any)=>(
<Alert variant={idx.class} className="alert rounded-pill alert-dismissible fade show" key={alt7}>
{idx.text}
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"
onClick={() => handleRemove3(idx.id)}>
<i className="bi bi-x"></i></Button>
</Alert>
))}
Rounded Outline Alerts
A simple outline rounded primary alert—check it out!
A simple outline rounded secondary alert—check it out!
A simple outline rounded warning alert—check it out!
A simple outline rounded danger alert—check it out!
{roundedoutlinealert.map((idx:any)=>(
<Alert variant={idx.class} className="alert rounded-pill alert-dismissible fade show" key={Math.random()}>
{idx.text}
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"
onClick={() => handleRemove4(idx.id)}><i className="bi bi-x"></i></Button>
</Alert>
)}
Rounded Default Alerts
A simple rounded primary alert—check it out!
A simple rounded secondary alert—check it out!
A simple rounded warning alert—check it out!
A simple rounded danger alert—check it out!
{roundeddefaultalert.map((idx:any)=>(
<Alert variant={idx.class} className="alert rounded-pill alert-dismissible fade show" key={Math.random()}>
{idx.text}
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"
onClick={() => handleRemove5(idx.id)}
><i className="bi bi-x"></i></Button>
</Alert>
))}
Rounded Alerts With Custom Close Button
A simple rounded primary alert—check it out!
A simple rounded secondary alert—check it out!
A simple rounded warning alert—check it out!
A simple rounded danger alert—check it out!
{roundedwithbtnalert.map((idx:any)=>(
<Alert variant={idx.class} className="alert rounded-pill alert-dismissible fade show"key={Math.random()}>
{idx.text}
<Button variant='' type="button" className="btn-close custom-close" data-bs-dismiss="alert" aria-label="Close"
onClick={() => handleRemove6(idx.id)}>
<i className="bi bi-x"></i></Button>
</Alert>
))}
Alerts with icons
An example alert with an icon
An example success alert with an icon
An example warning alert with an icon
An example danger alert with an icon
<Alert variant='primary' className="alert d-flex align-items-center" role="alert">
<svg className="flex-shrink-0 me-2 svg-primary" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
<div>
An example alert with an icon
</div>
</Alert>
Customized Alerts With SVG's
<Alert variant='primary' className="alert alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
<svg className="svg-primary" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
A customized primary alert with an icon
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"><i className="bi bi-x"></i></Button>
</Alert>
Alerts With Images
A simple primary alert with image—check it out!
A simple secondary alert with image—check it out!
A simple warning alert with image—check it out!
A simple danger alert with image—check it out!
A simple info alert with image—check it out!
A simple light alert with image—check it out!
A simple dark alert with image—check it out!
{imagesalert.map((idx:any)=>(
<Alert variant={idx.color} className="alert alert-img alert-dismissible fase show rounded-pill flex-wrap" role="alert" key={Math.random()}>
<div className="avatar avatar-sm me-3 avatar-rounded">
<img src={idx.src1} alt="img"/>
</div>
<div>A simple {idx.color} alert with image—check it out!</div>
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" onClick={() => handleRemove8(idx.id)}
><i className="bi bi-x"></i></Button>
</Alert>
))}
Alerts With Different size Images
A simple primary alert with image—check it out!
A simple secondary alert with image—check it out!
A simple warning alert with image—check it out!
A simple danger alert with image—check it out!
A simple info alert with image—check it out!
A simple dark alert with image—check it out!
<Alert variant='primary' className="alert alert-img alert-dismissible fase show flex-wrap" role="alert">
<div className="avatar avatar-xs me-3">
<img src={face1} alt="img"/>
</div>
<div>A simple primary alert with image—check it out!</div>
<Button variant='' type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"><i className="bi bi-x"></i></Button>
</Alert>
Information?
This alert is created to just show the related information.
Confirmed
This alert is created to just show the confirmation message.
Warning
This alert is created to just show the warning message.
danger
This alert is created to just show the danger message.
Additional content
Thank you for reporting this.
We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?
Thank you for reporting this.
We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?
Thank you for reporting this.
We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?
Thank you for reporting this.
We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?
<Col xl={6}>
<Alert variant='secondary' className="alert overflow-hidden p-0" role="alert">
<div className="p-3 bg-secondary text-fixed-white d-flex justify-content-between">
<h6 className="aletr-heading mb-0">Thank you for reporting this.</h6>
<Button type="button" variant='' className="btn-close p-0 text-fixed-white" data-bs-dismiss="alert" aria-label="Close"><i className="bi bi-x"></i></Button>
</div>
<hr className="my-0"/>
<div className="p-3">
<p className="mb-0">We appreciate you to let us know the bug in the template and for warning us about future consequences <Link href="#!" className="fw-semibold text-decoration-underline">Visit for support for queries ?</Link></p>
</div>
</Alert>
</Col>