How to add a close icon in bootstrap tabs?

Question

I want to add a close icon in bootstrap tabs and then I can close the tab by click the icon.

I try below but the "X" is displayed not on the same line as tab title.

.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; }  <a id="user-list-tab-li" style="display:inline;" href="#user-list-tab-pane">The tab</a>  <span class="close">×</span> 

Answer 1

the working fiddle is here

 function registerCloseEvent() {  $(".closeTab").click(function () {      //there are multiple elements which has .closeTab icon so close the tab whose close icon is clicked     var tabContentId = $(this).parent().attr("href");     $(this).parent().parent().remove(); //remove li of tab     $('#myTab a:last').tab('show'); // Select first tab     $(tabContentId).remove(); //remove respective tab content  });  }