24-Oct-2020
.
Admin
Hi Dev,
Now let's example of bootstrap 4 tags input. if you want to tags input design issue in bootstrap 4 then you can use bellow example. The Design problem is when use tags input in bootstrap 4. here i will give you solution of tags input design issue in bootstrap 4.
This article will give you use of tags input in bootstrap 4. in this example i am simply add custom css to solved design issue. let's see the bellow example:
Solution
<style type="text/css">
.bootstrap-tagsinput{
width: 100%;
}
.label-info{
background-color: #17a2b8;
}
.label {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,
border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
</style>
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Tag Input Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js" integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-angular.min.js" integrity="sha512-KT0oYlhnDf0XQfjuCS/QIw4sjTHdkefv8rOJY5HHdNEZ6AmOh1DW/ZdSqpipe+2AEXym5D0khNu95Mtmw9VNKg==" crossorigin="anonymous"></script>
<style type="text/css">
.bootstrap-tagsinput{
width: 100%;
}
.label-info{
background-color: #17a2b8;
}
.label {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,
border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
</style>
</head>
<body>
<div class="row mt-5">
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header bg-info text-white">
<h2><strong>Bootstrap 4 Tag Input Example</strong></h2>
</div>
<div class="card-body">
<label>Tags :</label>
<input type="text" data-role="tagsinput" name="tags" class="form-control">
</div>
</div>
</div>
</div>
</body>
</html>
It will help you....
#Bootstrap
#Bootstrap 4