Bootstrap tags input not displaying the tags

Question

I'm struggling to get bootstrap tag inputs working, but I can't see what I could be doing wrong. As far as I can tell I've even followed the steps in this post How to use Bootstrap Tags Input plugin

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">

<form>
  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags">
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>

I'm seeing 2 things that are strange:

1) The tags appear in the DOM but don't seem to have any sort of background applied so they appear invisible. But I can't see anywhere any mention of needing to specify a default color in the docs.

2) The control seems to resize it self as you're typing and putting in tags which I don't understand as it's supposed to have a fixed size.

Does anyone know what I'm doing wrong here? Obviously I could add some CSS hacks to get the tags appearing, but my understanding was that it should just work out the box?

Answer 1

This is actually like proving the bootstrap wrong:

Because it looks like they have removed the support for Bootstrap Tags Input plugin after 3.3.7

The below snippet will work just fine:

.bootstrap-tagsinput {
     width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">

<form>
  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags">
    </div>
  </div>
</form>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>

when I removed :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

and added :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

The background style started to appear solving your first problem.

The second is actually Bootstrap Tags Input plugin default behaviour you can refer to this link which is their documentation page, in that you can see -

.bootstrap-tagsinput {
    width: 100%;
}

The above style comes from app.css which links from there example paths. This style is what keeps the <input> 100% of its parent width. So if you want 100% width you have to use custom style.

Hope this was helpful.