bootstrap tags input width

Question

I am trying to use bootstrap tagsinput in a form contained in a modal like this

...
<div class="form-group">
                            <label for="myTagLabel">Tags:</label> 
                            <input class="form-control" id="myTag"  type="text" data-role="tagsinput">
                        </div>

As you can see in the image above I can't see why the input doesn't have the width of the containing form.

UPDATE this http://www.bootply.com/f43d1A0YxK reproduces the issue

Answer 1

The reason you are seeing this behaviour is because bootstrap-tagsinput actually hides the original input element, and in its place adds a div. You are seeing a div element styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.

What you want to change is the .bootstrap-tagsinput class:

.bootstrap-tagsinput {
  width: 100% !important;
}

Here's a demo: http://www.bootply.com/1iATJfFM69