title: how to add close button to snack bar
body: <p>Hi i have a piece of code to generate the snack bar. I have used bootstrap alert with close option to generate the snack bar but when i click the close button is not working for me. Is it adding close option is possible? If yes, would you please explain how? </p>
  
  <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>function myFunction() {
          var x = document.getElementById("snackbar")
          x.className = "show";
          setTimeout(function(){ x.className = x.className.replace("show", ""); }, 10000);
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#snackbar {
      visibility: hidden;
      min-width: 250px;
      margin-left: -125px;
      background-color: #1E6C97;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      right:20px;
      bottom: 40px;
      font-size: 17px;
  }
  
  #snackbar.show {
      visibility: visible;
      -webkit-animation: fadein 2.5s, fadeout 3.5s 6.5s;
      animation: fadein 2.5s, fadeout 3.5s 6.5s;
  }
  
  @-webkit-keyframes fadein {
      from {bottom: 0; opacity: 0;} 
      to {bottom: 40px; opacity: 1;}
  }
  
  @keyframes fadein {
      from {bottom: 0; opacity: 0;}
      to {bottom: 40px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
      from {bottom: 40px; opacity: 1;} 
      to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
      from {bottom: 40px; opacity: 1;}
      to {bottom: 0; opacity: 0;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;button onclick="myFunction()"&gt;Show Snackbar&lt;/button&gt;
  &lt;div class="alert alert-info alert-dismissable fade in" id="snackbar"&gt;
       &lt;a href="#" class="close" data-dismiss="alert" aria-label="close"&gt;&amp;times;&lt;/a&gt;&amp;nbsp;&amp;nbsp;Join [12531] Buyers from [181] Countries Who Connect with Suppliers on PaperIndex
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>