To create the tag portion, you can use [**bootstrap-tagsinput** by Tim Schlechter][2] and then style it similar to [Bootstrap's Input Group][1] with some custom styling like this:


[![Tags Input Group][5]][5]

### Demo in [jsFiddle][6] & 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][3], with some custom styling which will look like this:

[![Alert-Tag][4]][4]

### Demo in [jsFiddle][6] & 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>







  [6]: http://jsfiddle.net/KyleMit/spvywgry/
  [2]: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

  [1]: https://getbootstrap.com/docs/3.3/components/#input-groups

  [3]: https://getbootstrap.com/docs/3.3/javascript/#alerts
  [4]: https://i.stack.imgur.com/B2G1y.png
  [5]: https://i.stack.imgur.com/Itfxy.png

I try to make a tag list (like in stackoverflow) using a [bootstrap 3 input group][1].

The result should look similar to this with a full height button on the right:

[![should look similar to this][2]][3]


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](http://jsfiddle.net/bc3yh42k/)

However, that doesn't work as expected.



  [1]: http://getbootstrap.com/components/#input-groups
  [2]: http://i.stack.imgur.com/OgpAr.png
[3]: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/