<Card>
<CardHeader>
<h5>Basic Alerts</h5>
</CardHeader>
<CardBody>
<Alert variant="primary" role="alert">Simple primary alert - check it out!</Alert>
<Alert variant="secondary" role="alert">Simple secondary alert - check it out!</Alert>
<Alert variant="success" role="alert">Simple success alert - check it out!</Alert>
<Alert variant="danger" role="alert">Simple danger alert - check it out!</Alert>
<Alert variant="warning" role="alert">Simple warning alert - check it out!</Alert>
<Alert variant="info" role="alert">Simple info alert - check it out!</Alert>
<Alert variant="light" role="alert">Simple light alert - check it out!</Alert>
<Alert variant="dark" role="alert">Simple dark alert - check it out!</Alert>
</CardBody>
</Card><Card>
<CardHeader>
<h5>Light Alert With Link color</h5>
</CardHeader>
<CardBody>
<Alert color="light-primary">
Light primary color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-secondary">
Light secondary color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-success">
Light success color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-danger">
Light danger color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-warning">
Light warning color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-info">
Light info color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-light">
Light light color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-dark">
Light dark color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
</CardBody>
</Card><Card>
<CardHeader>
<h5>Outline Alerts</h5>
</CardHeader>
<CardBody>
<Alert variant="outline-primary" role="alert">Outline-alert primary - check it out!</Alert>
<Alert variant="outline-secondary" role="alert">Outline-alert secondary - check it out!</Alert>
<Alert variant="outline-success" role="alert">Outline-alert success - check it out!</Alert>
<Alert variant="outline-danger" role="alert">Outline-alert danger - check it out!</Alert>
<Alert variant="outline-warning" role="alert">Outline-alert warning - check it out!</Alert>
<Alert variant="outline-info" role="alert">Outline-alert info - check it out!</Alert>
<Alert variant="outline-light" role="alert">Outline-alert light - check it out!</Alert>
<Alert variant="outline-dark" role="alert">Outline-alert dark - check it out!</Alert>
</CardBody>
</Card>Light-border-primary alert With icons - check it out!
Light-border-secondary alert With icons - check it out!
Light-border-success alert With icons - check it out!
Light-border-danger alert With icons - check it out!
Light-border-warning alert With icons - check it out!
Light-border-info alert With icons - check it out!
Light-border-light alert With icons - check it out!
Light-border-dark alert With icons - check it out!
<Card>
<CardHeader>
<h5>Alert With Icon</h5>
</CardHeader>
<CardBody>
<Alert variant="light-border-primary" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Download size={16} className="me-2" />
Light-border-primary alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-secondary" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Wheelchair size={16} className="me-2" />
Light-border-secondary alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-success" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<CheckCircle size={16} className="me-2" />
Light-border-success alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-danger" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Power size={16} className="me-2" />
Light-border-danger alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-warning" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Warning size={16} className="me-2" />
Light-border-warning alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-info" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Info size={16} className="me-2" />
Light-border-info alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-light" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<AlignBottom size={16} className="me-2" />
Light-border-light alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-dark" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Globe size={16} className="me-2" />
Light-border-dark alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
</CardBody>
</Card><Card>
<CardHeader>
<h5>Alert With Left Border</h5>
</CardHeader>
<CardBody>
<Alert variant="border-primary" role="alert">Alert with left slide border - check out!</Alert>
<Alert variant="border-secondary" role="alert">Alert with left slide border - check out!</Alert>
<Alert variant="border-success" role="alert">Alert with left slide border - check out!</Alert>
</CardBody>
</Card>Primary label alert - check out!
Secondary label alert - check out!!
Success label alert - check out!
<Card>
<CardHeader>
<h5>Alert With Label Icons</h5>
</CardHeader>
<CardBody>
<div className="alert alert-label alert-label-primary" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-primary">
<DownloadSimple size={20} weight="bold" />
</span>
Primary label alert - check out!
</p>
</div>
<div className="alert alert-label alert-label-secondary" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-secondary">
<DownloadSimple size={20} weight="bold" />
</span>
Secondary label alert - check out!!
</p>
</div>
<div className="alert alert-label alert-label-success" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-success">
<DownloadSimple size={20} weight="bold" />
</span>
Success label alert - check out!
</p>
</div>
</CardBody>
</Card>
We have Cookies! We use it to ensure you get the best experience on our website and service
Your order is delayed
With this new Version you have accesss to more customization features and file export options.
Our team is currently checking some errors in this area. We don't recommend changing any of your settings until the next update.
$ <Alert color="primary" dismissible>
<div className="d-flex justify-content-between">
<img src="/images/icons/cookie-.png" className="w-35 h-35 me-2" alt="icon" />
<p className="mb-0">We have Cookies! We use it to ensure you get the best experience on our website and service</p>
<button type="button" className="btn-close" aria-label="Close"></button>
</div>
</Alert>
<Alert className="alert-label alert-label-success">
<div className="d-flex justify-content-between align-items-center w-100">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-success">
{/* Icon Placeholder */}
</span>
Your order is delayed
</p>
<button className="btn btn-sm btn-success" >Accept</button>
</div>
</Alert>
<Alert className="alert-border-warning">
<h6>
{/* Icon Placeholder */} New Version is now available
</h6>
<p>With this new Version you have accesss to more customization features and file export options.</p>
<div className="text-end">
<a href="#" className="link-primary text-d-underline" >Don't allow</a>
<a href="#" className="link-primary text-d-underline ms-2">Allow</a>
</div>
</Alert>
<Alert className="custom-alert p-0">
<div className="alert-header">
<button type="button" className="btn-close" aria-label="Close"></button>
</div>
<div className="alert-body">
<h3 className="mb-3 text-center">
{/* Icon Placeholder */} Under maintenance
</h3>
<p className="mb-3">Our team is currently checking some errors in this area. We don't recommend changing any of your settings until the next update.</p>
<div className="text-end">
<a href="#" className="btn btn-warning">Get more info</a>
</div>
</div>
</Alert>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
This is another alert. It demonstrates usage of spacing and content layout inside alerts.
Use margin utilities as needed.
You’ve successfully triggered a success alert with additional content and a dismiss icon.
Feel free to customize this layout further.
<Card>
<CardHeader>
<h5>Alert Additional Content</h5>
</CardHeader>
<CardBody>
<Alert variant="primary">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
Well done!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr />
<p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</Alert>
<Alert variant="secondary">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
Heads up!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>This is another alert. It demonstrates usage of spacing and content layout inside alerts.</p>
<hr />
<p className="mb-0">Use margin utilities as needed.</p>
</Alert>
<Alert variant="success">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
Congratulations!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>You’ve successfully triggered a success alert with additional content and a dismiss icon.</p>
<hr />
<p className="mb-0">Feel free to customize this layout further.</p>
</Alert>
</CardBody>
</Card>