How to use Bootstrap Tags Input Plugin

2224 views 1 year ago Bootstrap

In the blog applications, while creating blog, you want to add multiple tags for the article. Dropdown only allows users to select options list. You may want user to input desired tags. This is where Bootstrap tags input plugin is useful.

In this article, we will learn how to create and use Bootstrap tags input. Bootstrap tags input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Installation

Download plugin zip code from GitHub. Alternativally you can use CDN file. First include Bootstrap 3.3.5 CDN files into <head> tag. Then include Bootstrap tags input css and Javascript tags.

Usage

Place all css in the <head> tag and script tags before </body> tag ends. In the <input> tag, add data-role="tagsinput" attribute to automatically change it to a tags input field. You can also use <select multiple> instead of <input> to get multivalue support. The value will be set in an array instead of comma seperated string.

Here is the example code:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Tags Input</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.css"/>
        <style type="text/css">
            .bootstrap-tagsinput {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2>Bootstrap Tags Input</h2>
            <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.js"></script>
    </body>
</html>

To add the tag, press TAB button.

The Bootstrap tags input can be also used with Typeahead.js to predict the value from the predefined.

The plugin provides many options to customize tags input. It also supports required methods and events to perform task on event.

You can visit official documentation website to view full documentation.

I hope you will like to use the plugin in development.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]