Login

Alerts

Alert
Ex. <div className="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>
Alert with Icons
Ex. <div className="alert bg-soft-primary fw-medium" role="alert"> <MdInfoOutline className="fs-5 align-middle me-1"></MdInfoOutline> An example alert with an icon </div>
Alert Links
Ex. <div className="alert alert-primary" role="alert"> A simple primary alert with <Link href="#" className="alert-link"></Link>. </div>
Additional Content
Dismissing Alert
Ex.
<div className="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
  <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
</div>
Advanced Alert
Ex.
<div className="alert alert-primary alert-pills" role="alert">
   <span className="badge rounded-pill bg-danger"> New </span>
   <span className="alert-content"> A Modern primary alert—check it out! </span>
</div>
Advanced Outline Alert
Ex.
<div className="alert alert-outline-primary alert-pills" role="alert">
   <span className="badge rounded-pill bg-danger"> New </span>
   <span className="alert-content"> A Modern primary alert—check it out! </span>
</div>