title: Badge not loading properly in bootstrap
body: <p>My index.html is not showing the badge properly on any browser. It is not showing the numbers in a colored circle. It is just showing it as if it didn't load the CSS correctly. </p>
  
  <p>I tried local and CDN paths from bootstrap and jquery but the problem is not resolved. </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-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet"   href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="alert alert-danger" &gt;
    &lt;a href="#" class="close" data-dismiss="alert" aria-level="close"&gt;&amp;times;&lt;/a&gt;
    File is deleted!
  &lt;/div&gt; 
  
  &lt;a href="#"&gt;Messages &lt;span class="badge"&gt;5&lt;/span&gt; &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want it to show the text "Messages" and then a colored circle with the text "5".  </p>