onlinecode

How to use Bootstrap Tags input jQuery plugin with example

onlinecode

How to use Bootstrap Tags input jQuery plugin with example

In this post we will give you information about How to use Bootstrap Tags input jQuery plugin with example. Hear we will give you detail about How to use Bootstrap Tags input jQuery plugin with exampleAnd how to use it also give you demo for it if it is necessary.

In this tutorial, I will let you know how to use bootstrap tagmanager jquery plugin with example.

Using tags, you can organize content on your website and you can have multiple instances of bootstrap tagmanager on a single page.

There are several plugin available with bootstrap with nice layouts like bootstrap form validation, bootstrap lightbox, bootstrap colorpicker, bootstrap datepicker etc.

You can use the bootstrap alert class to create colored tag boxes like tm-input-info, tm-input-warning, tm-input-danger.

See also  Most Powerful JavaScript Libraries Designed for Deep Leaning Devlopment

For this example, you will need following library :

  1. bootstrap.min.css

  2. bootstrap.min.js

  3. jquery.min.js

  4. tagmanager.min.css

  5. tagmanager.min.js

After this example, you can click the button “Show Demo” to see how bootstrap tagmanager is working with input elements.

  2. <!DOCTYPEhtml>
  3. <html>
  4. <head>
  5.     <title>How to use Bootstrap Tags input jQuery plugin with example</title>
  6.     <linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  7.     <linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
  8.     <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  9.     <scripttype="text/javascript"src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10.     <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
  11. </head>
  12. <body>
  14.     <form>
  15. <divclass="row">
  17. <divclass="col-xs-12 col-sm-12 col-md-12">
  18. <divclass="form-group">
  19. <strong>Content:</strong>
  20. <textareaclass="form-control"></textarea>
  21. </div>
  22. </div>
  24. <divclass="col-xs-12 col-sm-12 col-md-12">
  25. <divclass="form-group">
  26. <strong>Tag:</strong>
  27. <inputtype="text"name="tags"placeholder="Tags"class="form-control tm-input tm-input-info"/>
  28. </div>
  29. </div>
  31. <divclass="col-xs-12 col-sm-12 col-md-12 text-center">
  32. <buttontype="submit"class="btn btn-primary">Submit</button>
  33. </div>
  35. </div>
  36.     </form>
  38.     <scripttype="text/javascript">
  39.         $(".tm-input").tagsManager();
  40.     </script>
  42. </body>
  43. </html>
<!DOCTYPE html>
<html>
<head>
	<title>How to use Bootstrap Tags input jQuery plugin with example</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
</head>
<body>

	<form>
     <div >

        <div >
            <div >
                <strong>Content:</strong>
                <textarea ></textarea>
            </div>
        </div>

        <div >
            <div >
                <strong>Tag:</strong>
                <input type="text" name="tags" placeholder="Tags" />
            </div>
        </div>

        <div >
                <button type="submit" >Submit</button>
        </div>
        
    </div>
	</form>

	<script type="text/javascript">
		$(".tm-input").tagsManager();
	</script>

</body>
</html>

PHP Bootstrap – dynamic autocomplete tag input using jquery plugin

Show Demo

Label :

HTML

jQuery

How To

CSS

Bootstrap

JavaScript

Hope this code and post will helped you for implement How to use Bootstrap Tags input jQuery plugin with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version