Bootstrap 4 Tags Input Example

Bootstrap , Bootstrap 4

Nicesnippets

13386

24-10-2020


Bootstrap 4 Tags Input Example

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="http://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....


Recommended Posts