Bootstrap input tags example
July 02, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In the <input> tag, add data-role="tagsinput" attribute to automatically change it to a tags input field.
Today, I am going to show you. how to create input tags in bootstrap with code example.
Table of contents
- Includes bootstrap library
- Define its class name
This article will guide you to adding input tags in Bootstrap with example.
Step 1: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.css"/>
Step 2: Define its class name
After that, create the input tag with a class name type="text".
<div class="container">
<h2>Bootstrap Tags Input</h2>
<input type="text" value="India,Rajsthan,Utterpradesh," data-role="tagsinput" />
</div> Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tags Input</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.css"/>
<style type="text/css">
.bootstrap-tagsinput {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Tags Input</h2>
<input type="text" value="India,Rajsthan,Utterpradesh," data-role="tagsinput" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.js"></script>
</body>
</html>Check the output of the above code example.
All the best 👍