bootstrap tags input width

bootstrap tags input width

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

As you can see in the image above I can’t see why the input doesn’t have the width of the containing form.
this reproduces the issue


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

Solution 2:

Add display: block; to the .bootstrap-tagsinput class in your CSS. As noted by Mohamad this class is not present in your own HTML, but when you inspect element/view source you can see that the input is wrapped in a <div class="bootstrap-tagsinput">.

    display: block;

This will overwrite the display: inline-block; that is being inherited.

Related:  Bootstrap switch checked event?

Bootply Demo

Solution 3:

Cristian almost guessed it
somewhere in js:

$('.bootstrap-tagsinput > input').css('width', '');

and in css:

.bootstrap-tagsinput input {
  width: 10em;

Solution 4:

I see the tagsinput plugin you are using comes with its own css file.


These css rules are automatically being added to your input when you add the data-role=”tagsinput”.

.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;          //Try change this to 100% !important;
  display: block;             // Add this in

You need to update these so they don’t over rule native bootstrap rule.

Solution 5:

The reason you are seeing this behaviour is because the style actually override the width attribute:

style="width: 3em ! important;"

Remove the style:

$('.bootstrap-tagsinput > input').prop( "style", null );

This should work properly.

Related:  Change buttons to “btn-block” on mobile screen size

Additionally, set the desired width with CSS:

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