Menu
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> 
407
Creating close button in Bootstrap 4 The close button can be added by using the simple markup with CSS class. The main container for close button is the <button> tag with .
A close button is a <button> element with the class . close-button . We use the multiplication symbol ( × ) as the X icon. This icon is wrapped in a <span> with the attribute aria-hidden="true" , so screen readers don't read the X icon.
Add a close button using HTML, CSS, and JavaScriptCreate a button element in your creative using a <div> tag. Create the element in the HTML file and style it in the CSS file. Then assign the ID close-btn to your element.
To actually close the card we can make use of the BS4 Data-API and put the the following data attributes in the button tag: data-dismiss="alert" data-target="#closeablecard" . data-target is the ID of our card and data-dismiss=alert triggers the actual close event in Bootstrap.
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 }); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
