How To Add and Remove Tabs in Bootstrap 3 Dynamically?

27 July 2013Junaid Qadir2 min read252 Words
How To Add and Remove Tabs in Bootstrap 3 Dynamically?

The code is compatible with Bootable 3.x

Earlier today, I was working on a web application with Bootstrap and I was required to allow a user to add and remove tabs. Unfortunately Bootstrap doesn't give you the close button on a tab out-of-the-box. So I quickly went to the Bootstrap's Issues page on GitHub where I stumbled upon the very problem I was facing.

A Mark, one of the maintainers of the project was of the opinion:

I don't think we'll be adding this as native functionality, but feel free to file an issue later if you wish to add whatever solution you come up with to the wiki for forks/extensions/etc.

I was like wow! Now, everyone was proposing their way of doing it. So, I came up with my solution thanks to this guy who proposed this solution. He just gave an heads-up and that was all I needed, then I sat and wrote the three features I needed i.e. Add, Remove and renumber the tabs (if in case one is removed from the middle. and yeah, the first tab cannot be removed).


The Code

The following code assumes Bootstrap and jQuery scripts and styles are loaded.

[gist id="807"/]


The Demo

Check out the demo here.

Please like and share the post if you enjoyed it and if it helped you.

Share this post
How do you feel about this article?