CloseTag | الشروحات | Bootstrap | التحذيرات في Bootstrap | Bootstrap Alerts

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    </head>
    <body>

      <div class="container mt-3">
        <h2>Animated Alerts</h2>
        <p>The .fade and .show classes adds a fading effect when closing the alert message.</p>
        <div class="alert alert-success alert-dismissible fade show">
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          <strong>Success!</strong> This alert box could indicate a successful or positive action.
        </div>
        <div class="alert alert-info alert-dismissible fade show">
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
        </div>
        <div class="alert alert-warning alert-dismissible fade show">
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
        </div>
        <div class="alert alert-danger alert-dismissible fade show">
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
        </div>
        <div class="alert alert-primary alert-dismissible fade show">
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          <strong>Primary!</strong> Indicates an important action.
        </div>
        <div class="alert alert-secondary alert-dismissible fade show">
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          <strong>Secondary!</strong> Indicates a slightly less important action.
        </div>
        <div class="alert alert-dark alert-dismissible fade show">
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          <strong>Dark!</strong> Dark grey alert.
        </div>
        <div class="alert alert-light alert-dismissible fade show">
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          <strong>Light!</strong> Light grey alert.
        </div>
      </div>
      


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<!--  -->
    </body>
  </html>

PCFkb2N0eXBlIGh0bWw+DQogIDxodG1sIGxhbmc9ImVuIj4NCiAgICA8aGVhZD4NCiAgICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSI+DQogICAgICA8dGl0bGU+Qm9vdHN0cmFwIGRlbW88L3RpdGxlPg0KICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4gOjotd2Via2l0LXNjcm9sbGJhcnt3aWR0aDo3cHg7aGVpZ2h0OjdweDt9Ojotd2Via2l0LXNjcm9sbGJhci10cmFja3tiYWNrZ3JvdW5kOiNmZmY7fTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJ7Ym9yZGVyLXJhZGl1czo1cHg7YmFja2dyb3VuZDojMmY0NWZmO308L3N0eWxlPjwvaGVhZD4NCiAgICA8Ym9keT4NCg0KICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIG10LTMiPg0KICAgICAgICA8aDI+QW5pbWF0ZWQgQWxlcnRzPC9oMj4NCiAgICAgICAgPHA+VGhlIC5mYWRlIGFuZCAuc2hvdyBjbGFzc2VzIGFkZHMgYSBmYWRpbmcgZWZmZWN0IHdoZW4gY2xvc2luZyB0aGUgYWxlcnQgbWVzc2FnZS48L3A+DQogICAgICAgIDxkaXYgY2xhc3M9ImFsZXJ0IGFsZXJ0LXN1Y2Nlc3MgYWxlcnQtZGlzbWlzc2libGUgZmFkZSBzaG93Ij4NCiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0bi1jbG9zZSIgZGF0YS1icy1kaXNtaXNzPSJhbGVydCI+PC9idXR0b24+DQogICAgICAgICAgPHN0cm9uZz5TdWNjZXNzITwvc3Ryb25nPiBUaGlzIGFsZXJ0IGJveCBjb3VsZCBpbmRpY2F0ZSBhIHN1Y2Nlc3NmdWwgb3IgcG9zaXRpdmUgYWN0aW9uLg0KICAgICAgICA8L2Rpdj4NCiAgICAgICAgPGRpdiBjbGFzcz0iYWxlcnQgYWxlcnQtaW5mbyBhbGVydC1kaXNtaXNzaWJsZSBmYWRlIHNob3ciPg0KICAgICAgICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuLWNsb3NlIiBkYXRhLWJzLWRpc21pc3M9ImFsZXJ0Ij48L2J1dHRvbj4NCiAgICAgICAgICA8c3Ryb25nPkluZm8hPC9zdHJvbmc+IFRoaXMgYWxlcnQgYm94IGNvdWxkIGluZGljYXRlIGEgbmV1dHJhbCBpbmZvcm1hdGl2ZSBjaGFuZ2Ugb3IgYWN0aW9uLg0KICAgICAgICA8L2Rpdj4NCiAgICAgICAgPGRpdiBjbGFzcz0iYWxlcnQgYWxlcnQtd2FybmluZyBhbGVydC1kaXNtaXNzaWJsZSBmYWRlIHNob3ciPg0KICAgICAgICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuLWNsb3NlIiBkYXRhLWJzLWRpc21pc3M9ImFsZXJ0Ij48L2J1dHRvbj4NCiAgICAgICAgICA8c3Ryb25nPldhcm5pbmchPC9zdHJvbmc+IFRoaXMgYWxlcnQgYm94IGNvdWxkIGluZGljYXRlIGEgd2FybmluZyB0aGF0IG1pZ2h0IG5lZWQgYXR0ZW50aW9uLg0KICAgICAgICA8L2Rpdj4NCiAgICAgICAgPGRpdiBjbGFzcz0iYWxlcnQgYWxlcnQtZGFuZ2VyIGFsZXJ0LWRpc21pc3NpYmxlIGZhZGUgc2hvdyI+DQogICAgICAgICAgPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJidG4tY2xvc2UiIGRhdGEtYnMtZGlzbWlzcz0iYWxlcnQiPjwvYnV0dG9uPg0KICAgICAgICAgIDxzdHJvbmc+RGFuZ2VyITwvc3Ryb25nPiBUaGlzIGFsZXJ0IGJveCBjb3VsZCBpbmRpY2F0ZSBhIGRhbmdlcm91cyBvciBwb3RlbnRpYWxseSBuZWdhdGl2ZSBhY3Rpb24uDQogICAgICAgIDwvZGl2Pg0KICAgICAgICA8ZGl2IGNsYXNzPSJhbGVydCBhbGVydC1wcmltYXJ5IGFsZXJ0LWRpc21pc3NpYmxlIGZhZGUgc2hvdyI+DQogICAgICAgICAgPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJidG4tY2xvc2UiIGRhdGEtYnMtZGlzbWlzcz0iYWxlcnQiPjwvYnV0dG9uPg0KICAgICAgICAgIDxzdHJvbmc+UHJpbWFyeSE8L3N0cm9uZz4gSW5kaWNhdGVzIGFuIGltcG9ydGFudCBhY3Rpb24uDQogICAgICAgIDwvZGl2Pg0KICAgICAgICA8ZGl2IGNsYXNzPSJhbGVydCBhbGVydC1zZWNvbmRhcnkgYWxlcnQtZGlzbWlzc2libGUgZmFkZSBzaG93Ij4NCiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0bi1jbG9zZSIgZGF0YS1icy1kaXNtaXNzPSJhbGVydCI+PC9idXR0b24+DQogICAgICAgICAgPHN0cm9uZz5TZWNvbmRhcnkhPC9zdHJvbmc+IEluZGljYXRlcyBhIHNsaWdodGx5IGxlc3MgaW1wb3J0YW50IGFjdGlvbi4NCiAgICAgICAgPC9kaXY+DQogICAgICAgIDxkaXYgY2xhc3M9ImFsZXJ0IGFsZXJ0LWRhcmsgYWxlcnQtZGlzbWlzc2libGUgZmFkZSBzaG93Ij4NCiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0bi1jbG9zZSIgZGF0YS1icy1kaXNtaXNzPSJhbGVydCI+PC9idXR0b24+DQogICAgICAgICAgPHN0cm9uZz5EYXJrITwvc3Ryb25nPiBEYXJrIGdyZXkgYWxlcnQuDQogICAgICAgIDwvZGl2Pg0KICAgICAgICA8ZGl2IGNsYXNzPSJhbGVydCBhbGVydC1saWdodCBhbGVydC1kaXNtaXNzaWJsZSBmYWRlIHNob3ciPg0KICAgICAgICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuLWNsb3NlIiBkYXRhLWJzLWRpc21pc3M9ImFsZXJ0Ij48L2J1dHRvbj4NCiAgICAgICAgICA8c3Ryb25nPkxpZ2h0ITwvc3Ryb25nPiBMaWdodCBncmV5IGFsZXJ0Lg0KICAgICAgICA8L2Rpdj4NCiAgICAgIDwvZGl2Pg0KICAgICAgDQoNCg0KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5idW5kbGUubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1BM3JKRDg1Nktvd1NiN2R3bFpkWUVrTzM5R2FnaTd2SXNGMGpyUkFvUW1ES0t0UUJIVXVMWjlBc1N2NGpENFhhIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICAgICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQHBvcHBlcmpzL2NvcmVAMi4xMS41L2Rpc3QvdW1kL3BvcHBlci5taW4uanMiIGludGVncml0eT0ic2hhMzg0LVhlKzhjTDlvSmE2dE4vdmVDaFNQN3ErbW5TUGFqNUJjdTltUFg1RjV4SUdFMERWaXR0YXFUNWxvcmYwRUk3VmsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1PRG1ESVZ6TitwRmRleHhIRUhGQlFIMy85L3ZROXVvcmk0NXo0SmpuRnNSeWRibVFibUw1dDF0UTBjdWxVenlLIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCjwhLS0gIC0tPg0KICAgIDwvYm9keT4NCiAgPC9odG1sPg==