title: How to use Sweet alert on Bootstrap 4 alert which is using in a PHP application
body: <p>I use bootstrap alert to show alert message on user activity in my php app. Now I want to implement sweet alert so how Can I properly replace this to work?
  bellow is my <code>messages.php</code></p>
  <pre><code>  &lt;?php if (isset($_SESSION['success_msg'])): ?&gt;
        &lt;div id=&quot;success-alert&quot; class=&quot;alert &lt;?php echo 'alert-success'; ?&gt; alert-dismissible&quot; role=&quot;alert&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;?php
            echo $_SESSION['success_msg'];
            unset($_SESSION['success_msg']);
          ?&gt;
        &lt;/div&gt;
      &lt;?php endif; ?&gt;
  
      &lt;?php if (isset($_SESSION['error_msg'])): ?&gt;
        &lt;div id=&quot;danger-alert&quot; class=&quot;alert alert-danger alert-dismissible&quot; role=&quot;alert&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;?php
            echo $_SESSION['error_msg'];
            unset($_SESSION['error_msg']);
          ?&gt;
        &lt;/div&gt;
      &lt;?php endif; ?&gt;
  </code></pre>
  <p><strong>How I can use this ?</strong></p>
  <pre><code>//Success Message
      Swal.fire(
          {
              title: 'Success!',
              text: 'Updated successfully!',
              type: 'success',
              confirmButtonColor: &quot;#58db83&quot;,
             
          }
      )  
      
      //Error Message
      Swal.fire(
          {
              title: 'Failed!',
              text: 'Something went Wrong!',
              type: 'warning',
              confirmButtonColor: &quot;#58db83&quot;,
              
          }
      )
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Error Message
          $('#sa-title').click(function () {
                  Swal.fire(
                      {
                icon: 'error',
                title: 'Your work has failed to saved',
                showConfirmButton: true,
                timer: 2000
                      }
                  )
          });
  
          //Success Message
          $('#sa-success').click(function () {
             Swal.fire(
                {
                  icon: 'success',
                  title: 'Your work has been saved',
                  showConfirmButton: true,
                  timer: 2000
                }
              )
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.min.css"&gt;
  
  
  
   &lt;div class="row"&gt;
      &lt;div class="col-lg-3 col-md-6 m-b-30"&gt;
          &lt;p class="text-muted"&gt;A Error Message&lt;/p&gt;
          &lt;button type="button" class="btn btn-primary waves-effect waves-light" id="sa-title"&gt;Click me&lt;/button&gt;
      &lt;/div&gt;
      
      
      &lt;div class="col-lg-3 col-md-6 m-b-30"&gt;
          &lt;p class="text-muted"&gt;A success message!&lt;/p&gt;
          &lt;button type="button" class="btn btn-primary waves-effect waves-light" id="sa-success"&gt;Click me&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  
  
  
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.1/dist/sweetalert2.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>