Welcome to our tutorial, where we'll walk you through the process of creating a Bootstrap 5 tags input. We'll cover various methods, including creating a Bootstrap 5 tags input with jQuery and showcase an example using Tagify (tag.js) with Bootstrap 5.
Example 1
Tool Use
Bootstrap 5 CDN
Jquery 3 CDN
Bootstrap 5 simple tag input example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 tagsinput Example</title>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"
rel="stylesheet"
/>
</head>
<style type="text/css">
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white !important;
background-color: #0d6efd;
padding: 0.2rem;
}
</style>
<body>
<form>
<div class="input-group m-5">
<input
type="text"
class="form-control p-4"
data-role="tagsinput"
/>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script>
$(function () {
$('input')
.on('change', function (event) {
var $element = $(event.target);
var $container = $element.closest('.example');
if (!$element.data('tagsinput')) return;
var val = $element.val();
if (val === null) val = 'null';
var items = $element.tagsinput('items');
$('code', $('pre.val', $container)).html(
$.isArray(val)
? JSON.stringify(val)
: '"' + val.replace('"', '\\"') + '"'
);
$('code', $('pre.items', $container)).html(
JSON.stringify($element.tagsinput('items'))
);
})
.trigger('change');
});
</script>
</html>
Bootstrap 5 simple tag input example.
Example 2
Tool Use
Bootstrap 5 CDN
Bootstrap 5 tag input with Tagify example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 tagsinput with Tagify </title>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="m-5 col-md-6">
<input name='tags' value='PHP,Laravel' class="form-control" autofocus>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@yaireo/tagify"></script>
<script src="https://unpkg.com/@yaireo/[email protected]/dist/tagify.polyfills.min.js"></script>
<script>
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=tags]');
// initialize Tagify on the above input node reference
new Tagify(input)
</script>
</html>
Bootstrap 5 tag input with Tagify example.
