Inline Form Make Input Text Full Width And Responsive

I have a problem when I use inline-form the input text does not take all the space. I am aware of that information, but I am a bootstrap beginner. Requires custom widths Inputs,

Solution 1:

According to Docs

May require custom widths

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

EDIT

as per your comment:

the input text take the rest of space. I want inline all the elements in a single row and if a space is left the input text should take it

use flexbox

/* !important ONLY USED FOR SNIPPET */.form-inline {
  display: flex
}

.flex {
  flex: 1;
  display: flex !important
}

.flexinput {
  flex: 1!important
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  /><divclass="panel panel-primary"><divclass="panel-heading"><h4>Search Options</h4></div><divclass="panel-body"><formclass="form-inline"><divclass="form-group"><divclass="btn-group"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
                Account ID &nbsp;<spanclass="caret"></span></button><ulclass="dropdown-menu"><li><ahref="#">Account ID</a></li><li><ahref="#">Company Name</a></li><li><ahref="#">Account Type</a></li><lirole="separator"class="divider"></li><li><ahref="#">Marketplaces</a></li></ul></div></div><divclass="form-group flex"><inputclass="form-control"type="text"value=""id="filter_id"placeholder="Put your filter here"><buttontype="button"class="btn btn-default"> Filtrer </button></div></form></div></div>

Solution 2:

Add a container as a 'context' in your markup and then use it to override your css in this specific context :

<divclass="special-form"><!-- form --></div>

CSS

.special-form.panel.form-control {
    width: 100%;
}