Twitter Bootstrap Tags

I’m definitely a fan of using Twitter Bootstrap to quickly scaffold together a UI. The current project I’m working on calls for a tagging system though, and I couldn’t readily find anything out there to provide that functionality to me for Twitter Bootstrap, so I wrote a quick plugin for it myself.


While probably not all that fancy, I’m sure you can find ways to put some lipstick on this pig. If not then it will look a little something like this below. You can take a look at an usable example as well if you like.

tag example

And using it couldn’t be easier to use. Add references to Twitter Bootstrap and jQuery, and then in the markup for your page just drop in the following.

<div id="example" class="tag"></div>

The plugin will automatically set itself up anywhere you have a div with a class of tag. Once it is on the page just click inside of it and start typing. These are the only rules.

Some Specifics

It’s a short little plugin so you can probably glean what you need from the source itself, but just in case here are the highlights.

If you want to add a tag through javascript you would to this.

$('#example').tag('addtag', 'add this tag');

You can also add a bunch of tags at once if you’ve got them in an array like so.

var tags = ['happy', 'flippin', 'holiday'];
$('#example').tag('addtags', tags);

You can get back an array of tags currently in the list by running this.

var tags = $('#example').tag('gettags');

And the other thing you could do is check to see if the list of tags already has a particular tag in it.

var isItInThere = $('#example').tag('contains', 'hooray');

I designed this more with ajax in mind than anything else, so in general you’d just call into gettags, but you should be able to do something like this to intercept the post.

$(function() {
  $('#save').submit(function() {

The Source

You can find the source code, as usual, up on GitHub. Please feel free to issue a pull request if you want to add in some functionality.