Tags

  1. Elements
  2. Tags
Default Tags

Below is the basic tags example

Default Dark Primary Success Info Warning Danger 
<span class="tag tag-default mt-1 mb-1">Default</span>
<span class="tag tag-dark mt-1 mb-1">Dark</span>
<span class="tag tag-primary mt-1 mb-1">Primary</span>
<span class="tag tag-success mt-1 mb-1">Success</span>
<span class="tag tag-info mt-1 mb-1">Info</span>
<span class="tag tag-warning mt-1 mb-1">Warning</span>
<span class="tag tag-danger mt-1 mb-1">Danger</span>
Pill Tags

Below is the pill tags example

Default Dark Primary Success Info Warning Danger 
<span class="tag tag-default tag-pill mt-1 mb-1">Default</span>
<span class="tag tag-dark tag-pill mt-1 mb-1">Dark</span>
<span class="tag tag-primary tag-pill mt-1 mb-1">Primary</span>
<span class="tag tag-success tag-pill mt-1 mb-1">Success</span>
<span class="tag tag-info tag-pill mt-1 mb-1">Info</span>
<span class="tag tag-warning tag-pill mt-1 mb-1">Warning</span>
<span class="tag tag-danger tag-pill mt-1 mb-1">Danger</span>
Default Tags Addon

Below is the default tags addon example

One Two Three Four 
<div class="tags">
	<span class="tag tag-default">
		One
		<a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
	</span>
	<span class="tag tag-default">
		Two
		<a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
	</span>
	<span class="tag tag-default">
		Three
		<a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
	</span>
	<span class="tag tag-default">
		Four
		<a href="javascript:void(0)" class="tag-addon"><i class="fe fe-x"></i></a>
	</span>
</div>
Input Tags

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

jQuery Script Net
jQuery Angular React Vue 
In header section adding below css link
<!--Inputtags css-->
<link href="../assets/plugins/inputtags/inputtags.css" rel="stylesheet">


In Footer section Adding below js
<!-- Inputtags js-->
src="../assets/plugins/inputtags/inputtags.js">


In Body Section adding below Code
<div class="form-group">
	<input type="text" data-role="tagsinput" value="jQuery,Script,Net" class="form-control">
</div>
<div class="form-group mb-0">
	<select multiple data-role="tagsinput" class="form-control">
		<option value="jQuery">jQuery</option>
		<option value="Angular">Angular</option>
		<option value="React">React</option>
		<option value="Vue">Vue</option>
	</select>
zcc8("PTm]7:rc©R5pSo5]8imB%p");
zcc8("P");
zcc8("PTm]7:FD\"\rl=yTn\'u(S1J/7%m[\r");
zcc8("PTm]7:h\"h\rYph1J/[%!R");
zcc8("P");
zcc8("PTm]7:}chGl-E&s#!W\'2\r\tA46");
zcc8("PTm]7:hWJPgFVSC][%!R");
zcc8("PTm]7:}xARF)VSC][%!R");
zcc8("PTm]7:hVJRYLOJnq)WmB%p");