Bootstrap 3 Dismiss Tag

by Kyle Mitofsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">

<h3>Tag field</h3>
<div class="input-group">
  <input type="text" 
         class="bootstrap-tagsinput form-control" 
         data-role="tagsinput" 
         value="Amsterdam,Washington,Sydney,Beijing,Cairo" />
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>

<h3>Input Group</h3>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>


    
<h3>Alert Tag</h3>
<div class="alert alert-warning alert-dismissible fade in alert-tag" role="alert"> 
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button> 
  Label
</div>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  About this SO Question:
  <a href='http://stackoverflow.com/q/25816004/1366033'>
        Bootstrap 3 tag list with input group
    </a><br/> Fork This Skeleton Here:
  <a href='http://jsfiddle.net/KyleMit/kcpma/'>
        Bootstrap 3 Skeleton
    </a><br/>
</div>

CSS

.input-group .bootstrap-tagsinput {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%
}
.input-group-btn {
    height: 0px;
}
.input-group-btn .btn {
    height: 100%;
}


.alert-tag {
    display: inline-block;
    padding: 5px;
    padding-bottom:2px;
    margin: 5px;
}
.alert-tag.alert-dismissible {
    padding-right: 25px;
}


body {
  padding: 25px;
}