Question

144

How to add a close icon in bootstrap tabs?

rated 0 times [ 149] [ 5] / answers: 1 / hits: 43848 / 11 Years ago, wed, august 7, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

jadyngraysons questions

1 AWS Lambda SNS Destinations not working on failure or success

Fri, Aug 14, 20, 00:00, 4 Years ago

1 React Hooks useState Array empty with states rendered in the component

Tue, May 5, 20, 00:00, 4 Years ago

1 postman pm set environment variable

Thu, Apr 23, 20, 00:00, 4 Years ago

1 getElementById after dynamically adding it in React

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How to customise Intl.DateTimeFormat date?

Tue, Dec 31, 19, 00:00, 4 Years ago

View All

answered 11 Years ago gageherberth · Accepted Answer

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



});

 }