How to Use Bootstrap Tags input
11 months ago
admin
Bootstrap
In this lesson, we will see how to use Bootstrap tags input, as we know bootstrap 5 does not provide a tags input field so let's see how we can do that.
Create the html file
So to do that we create an html file and we add the code below inside.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tags</title>
<style>
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white !important;
background-color: #0d6efd;
padding: 0.2rem;
border-radius: 0.2rem;
}
.bootstrap-tagsinput input {
padding: 0.3rem 0.3rem;
font-size: 1rem;
font-weight: 400;
background-color: #fff;
background-clip: padding-box;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
</style>
<!-- Bootstrap tags input CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" />
</head>
<body>
<h1>Bootstrap tags example</h1>
<input type="text" data-role="tagsinput" name="tags" placeholder="Tags">
<!-- Jquery JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<!-- Bootstrap tags input JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
</body>
</html>