title: How to add a close icon in bootstrap tabs?
body: <p>I want to add a close icon in bootstrap tabs and then I can close the tab by click the icon.</p>
  
  <p>I try below but the "X" is displayed not on the same line as tab title.</p>
  
  <pre><code>.close {
      font-size: 20px;
      font-weight: bold;
      line-height: 18px;
      color: #000000;
      text-shadow: 0 1px 0 #ffffff;
      opacity: 0.2;
      filter: alpha(opacity=20);
      text-decoration: none;
      display:inline;
  }
  .close:hover {
      display:inline;
      color: #000000;
      text-decoration: none;
      opacity: 0.4;
      filter: alpha(opacity=40);
      cursor: pointer;
  }
  
  &lt;a id="user-list-tab-li" style="display:inline;" href="#user-list-tab-pane"&gt;The tab&lt;/a&gt; 
  &lt;span class="close"&gt;×&lt;/span&gt;
  </code></pre>