Bootstrap 3 tag list with input group

Question

I try to make a tag list (like in stackoverflow) using a bootstrap 3 input group.

The result should look similar to this with a full height button on the right:

The base for my considerations looks like this:

<div class="container-fluid">
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
    </div>
</div>

Here is my attempt to make a tag list out of it (please note that it should have multiple lines)

HTML:

<div class="container-fluid">
    <div class="input-group">
        <div class="form-control">
            <ul>
                <li><span class="label label-default">Default</span></li>
                <li><span class="label label-primary">Primary</span></li>
                <li><span class="label label-success">Success</span></li>
                ... even more labels ...
                <li><span class="label label-default">Default</span></li>
                <li><span class="label label-primary">Primary</span></li>
                <li><span class="label label-success">Success</span></li>
            </ul>
            <input type="text">
        </div>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
    </div>
</div>

CSS:

ul {
    padding-left: 0;
    display: inline;
    list-style-type: none;
}
li {
    display: inline-block;
}

Running demo in fiddle

However, that doesn't work as expected.

Answer 1

To create the tag portion, you can use bootstrap-tagsinput by Tim Schlechter and then style it similar to Bootstrap's Input Group with some custom styling like this:

Demo in jsFiddle & Stack Snippets

.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%;
}

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


<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>

---

Dismissable Alert

If you're just trying to style a removable element, you can do that similar to Bootstrap's Dismissable Alert, with some custom styling which will look like this:

Demo in jsFiddle & Stack Snippets:

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

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

<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>