Alert
Simple primary alert - check it out!
Simple secondary alert - check it out!
Simple success alert - check it out!
Simple danger alert - check it out!
Simple warning alert - check it out!
Simple info alert - check it out!
Simple light alert - check it out!
Simple dark alert - check it out!
<Card>
<Card.Header>
<h5>Basic Alerts</h5>
</Card.Header>
<Card.Body>
<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>
</Card.Body>
</Card>Outline-alert primary - check it out!
Outline-alert secondary - check it out!
Outline-alert success - check it out!
Outline-alert danger - check it out!
Outline-alert warning - check it out!
Outline-alert info - check it out!
Outline-alert light - check it out!
Outline-alert dark - check it out!
<Card>
<Card.Header>
<h5>Outline Alerts</h5>
</Card.Header>
<Card.Body>
<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>
</Card.Body>
</Card>Light primary color alert with an example link - Check it!
Light secondary color alert with an example link - Check it!
Light success color alert with an example link - Check it!
Light danger color alert with an example link - Check it!
Light warning color alert with an example link - Check it!
Light info color alert with an example link - Check it!
Light light color alert with an example link - Check it!
Light dark color alert with an example link - Check it!
<Card>
<Card.Header>
<h5>Light Alert With Link color</h5>
</Card.Header>
<Card.Body>
<Alert variant="light-primary" role="alert">
Light primary color alert with<Alert.Link href="#">an example link</Alert.Link>.
- Check it!
</Alert>
<Alert variant="light-secondary" role="alert">
Light secondary color alert with<Alert.Link href="#">an example link</Alert.Link>.
- Check it!
</Alert>
<Alert variant="light-success" role="alert">
Light success color alert with<Alert.Link href="#">an example link</Alert.Link>.
- Check it!
</Alert>
<Alert variant="light-danger" role="alert">
Light danger color alert with<Alert.Link href="#">an example link</Alert.Link>.
- Check it!
</Alert>
<Alert variant="light-warning" role="alert">
Light warning color alert with<Alert.Link href="#">an example link</Alert.Link>.
- Check it!
</Alert>
<Alert variant="light-info" role="alert">
Light info color alert with<Alert.Link href="#">an example link</Alert.Link>.
- Check it!
</Alert>
<Alert variant="light-light" role="alert">
Light light color alert with<Alert.Link href="#">an example link</Alert.Link>.
- Check it!
</Alert>
<Alert variant="light-dark" role="alert">
Light dark color alert with<Alert.Link href="#">an example link</Alert.Link>.
- Check it!
</Alert>
</Card.Body>
</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>
<Card.Header>
<h5>Alert With Icon</h5>
</Card.Header>
<Card.Body>
<Alert variant="light-border-primary" role="alert" 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" role="alert" 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" role="alert" 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" role="alert" 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" role="alert" 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" role="alert" 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" role="alert" 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" role="alert" 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>
</Card.Body>
</Card>Primary border alert - check out!
Secondary border alert - check out!
Success border alert - check out!
<Card>
<Card.Header>
<h5>Alert With Left Border</h5>
</Card.Header>
<Card.Body>
<Alert variant="border-primary" role="alert">Primary border alert - check out!</Alert>
<Alert variant="border-secondary" role="alert">Secondary border alert - check out!</Alert>
<Alert variant="border-success" role="alert">Success border alert - check out!</Alert>
</Card.Body>
</Card>Alert with label icons - check out!
Alert with label icons - check out!
Alert with label icons - check out!
<Alert className=" 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} />
</span>
Alert with label icons - check out!
</p>
</Alert>
<Alert className=" 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} />
</span>
Alert with label icons - check out!
</p>
</Alert>
<Alert className=" 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} />
</span>
Alert with label icons - check out!
</p>
</Alert>
We have Cookies! We use it to ensure you get the best experience on our website and service
Your order is delayed
New Version is now available
With this new Version you have access to more customization features and file export options.
Under maintenance
Our team is currently checking some errors in this area. We don't recommend changing any of your settings until the next update.
<div className="alert alert-primary alert-dismissible" role="alert">
<div className="d-flex justify-content-between align-items-center">
<Image width={35} height={35} src="/images/icons/cookie-.png" className="w-35 h-35 me-2" alt="cookie 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 className="btn-close" data-bs-dismiss="alert" aria-label="Close" />
</div>
</div>
<div className="alert alert-label alert-label-success" role="alert">
<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">
<ShoppingCartSimple size={16} />
</span>
Your order is delayed
</p>
<button className="btn btn-sm btn-success" data-bs-dismiss="alert">Accept</button>
</div>
</div>
<div className="alert alert-border-warning" role="alert">
<h6>
<Info size={16} className="me-2 text-info" /> New Version is now available
</h6>
<p>With this new Version you have access to more customization features and file export options.</p>
<div className="text-end">
<a href="#" className="link-primary text-d-underline" data-bs-dismiss="alert">Don't allow</a>
<a href="#" className="link-primary text-d-underline ms-2">Allow</a>
</div>
</div>
<div className="alert custom-alert p-0" role="alert">
<div className="alert-header">
<button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" />
</div>
<div className="alert-body">
<h3 className="mb-0 text-center mb-3">
<Warning size={25} weight="fill" className="align-middle text-warning" /> 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>
</div>Well done!
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.
Well done!
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.
Well done!
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.
<Card>
<Card.Header>
<h5>Alert With Icon</h5>
</Card.Header>
<Card.Body>
<Alert variant="primary" role="alert">
<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" role="alert">
<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="success" role="alert">
<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>
</Card.Body>
</Card>