Awesome Tag system with bootstrap and Jquery

In this tutorial i will describe tag system of jquery. The tagging of text is very important in this time. There are alot of CMS has in built system to tag text or post, but if you want to create your own tagging system in your application then definitely this tutorial help you. We are using bootstrap3.0 and jquery to add tag and delete tag.

add_tag_system

Also checkout other tutorials of bootstrap tabs and pills,

Simple Example To Create Dynamic Boostrap Tags

Step 1: Include css and js file in head section of file.

Select Code
1
2
3
4
5
<script type='text/javascript' src='js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='js/bootstrap3.min.js?ver=3.8.1'></script>
<link rel='stylesheet' id='bootstrap3-style-css'  href='css/bootstrap3.min.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap2-style-css'  href='css/bootstrap-compatible.css?ver=3.8.1' type='text/css' media='all' />

Step 2: Create HTML layout to show tag and add tag.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="row">&nbsp</div>
<div class="form-group row">
    <label class="col-sm-2 control-label">Tags : </label>
    <div class="col-sm-7" id="form-added-tags"><span class="no-tag"><strong>There is no tag added
                                                    yet!</strong> </span></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-5 pull-left">
    <input type="text" placeholder="Tag Name" class="personal-tag-name form-control" value="" style="display: inline;"></div>                                               
    <div  class="col-sm-3"><button type="button" class="btn btn-default add-tag-btn"><i class="fa fa-tags"></i>Add Tag</button>
</div>
</div>
</div>

Step 3: Template for add tag.

Select Code
1
2
3
4
5
6
7
<div style="display: none;" class="message-form-template">
    <div class="new-tag">
        <span class="tag"><a class="message-form-delete-tag" data-id="0" href="javascript:;">
<span class="tag-icon"></span>
</a> &nbsp;<span class="tag-label">{tag_label}</span> </span>
    </div>
</div>

Step 4:Add css class for tag.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
    .tag-personnel {
    background-color: #DAF991;
    border: 1px solid #C2F456;
}
.tag {
    margin: 2px;
    padding: 6px 5px;
}
.tag {
    border-radius: 5px;
    color: #000000;
    display: inline-block;
    font-weight: bold;
    margin-right: 1px;
    padding: 2px 5px;
}
.tag a span.tag-icon {
    background-position: -312px 0 !important;
    margin: 0 !important;
    width: 14px !important;
}
.tag .tag-icon {
    background-image: url("glyphicons-halflings.png");
    background-position: 0 -48px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top;
    width: 14px;
}
    </style>
With help of above codes you can display and add tags,but if you want remove tags on click of cross button.You need to add below code in head section.

Step 4:Remove tag from tag list.

Select Code
1
2
3
4
5
jQuery('.message-form-delete-tag').die('click').live('click', function(e){
            e.preventDefault();
            var id =  parseInt(jQuery(this).attr('data-id'));
            jQuery(this).parents('.tag').remove();
        });