Bootstrap Tags screenshot

Bootstrap Tags

Author Avatar Theme by Maxwells
Updated: 9 Dec 2016
544 Stars

Bootstrap-themed jquery tag interface

Overview:

Bootstrap Tags is a jQuery plugin that extends Twitter Bootstrap by adding tagging functionality. It is compatible with Bootstrap versions 2.3.2 and 3.0 or higher. The plugin allows users to easily create tags, and provides features such as autosuggest, popovers for extended tag information, exclusions and filters for tag lists, placeholder prompts, and custom styling options.

Features:

  • Support for Bootstrap 2.3.2 and 3+
  • Autosuggest for tag input
  • Bootstrap Popovers for extended tag information
  • Exclusions: ability to deny specified tags
  • Filters: ability to allow only specified tags
  • Placeholder prompts for tag input
  • Customizable tag styling using Bootstrap button classes
  • Extensible with custom functions for tag addition/deletion, key presses, and exclusions

Installation:

To install Bootstrap Tags, follow these steps:

  1. Download the Bootstrap Tags plugin from the official GitHub repository.
  2. Copy the bootstrap-tags.min.js and bootstrap-tags.min.css files to your project directory.
  3. Include the CSS and JS files in your HTML file:
<link rel="stylesheet" href="path/to/bootstrap-tags.min.css">
<script src="path/to/bootstrap-tags.min.js"></script>
  1. Initialize the tagging interface by calling the tags() function on a jQuery element:
$(document).ready(function() {
  $('#tag-input').tags();
});
  1. Add an input field with the id tag-input to your HTML. This is where the user can enter tags.
<input type="text" id="tag-input" placeholder="Enter tags...">

Summary:

Bootstrap Tags is a jQuery plugin that adds tagging functionality to Twitter Bootstrap. It allows users to easily create and manage tags, with features such as autosuggest, popovers, exclusions, and filters. The plugin is compatible with Bootstrap 2.3.2 and 3.0 or higher, and can be customized with various options. To install, simply include the plugin’s CSS and JS files, and initialize the tagging interface on a designated input field.