Bootstrap Full-Width Text-Input Within Inline-Form

Bootstrap full-width text-input within inline-form

The bootstrap docs says about this:

Requires custom widths Inputs, selects, and textareas are 100% wide by
default in Bootstrap. To use the inline form, you'll have to set a
width on the form controls used within.

The default width of 100% as all form elements gets when they got the class form-control didn't apply if you use the form-inline class on your form.

You could take a look at the bootstrap.css (or .less, whatever you prefer) where you will find this part:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

Maybe you should take a look at input-groups, since I guess they have exactly the markup you want to use (working fiddle here):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>

Bootstrap 4 - full width form fields on inline form

Solution 1: .form-inline without grouping

According to the documentation, you can simply use the .inline-form class on your <form> element without grouping the single input elements (just remove the corresponding <div class="form-group"> elements).

For adjusting breaking points, see the Responsive Breakpoints section in the documentation.

Here is the working example (watch in fullscreen and change the viewport width to see the effect):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>bootstrap/4.0.0</h1>
<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
  <input type='hidden' name='method' value='search' />
  <input type='text' class='form-control' id='str' name='str' placeholder='Search'>
  <select name='mn' id='mn' class='form-control'>     <option value='n'>Month</option>     <option  value='1'>January</option>     <option  value='2'>February</option>  </select>
  <select class='form-control' name='yr' id='yr'>     <option value='n'>Year</option>     <option  value='1995'>1995</option>     <option  value='1996'>1996</option>  </select>
  <select name='format' id='format' class='form-control'>     <option value='n'>Format</option>     <option  value='1'>1</option>  </select>
  <select name='week_end_or_not' id='week_end_or_not' class='form-control'>     <option value='n'>Weekend Or Not</option>     <option  value='week'>Week Days</option>     <option  value='weekend'>Weekend</option>  </select>
  <select name='work_days' id='work_days' class='form-control'>     <option value='n'>Work Days?</option>     <option  value='yes'>Yes</option>     <option  value='no'>No</option>  </select>
  <select name='exact_phrase' id='exact_phrase' class='form-control'>     <option value='n'>Exact Phrase?</option>     <option  value='yes'>Yes</option>     <option  value='no'>No</option>  </select>
  <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>

Bootstrap 4 inline form full width

Updated 2018

Remove the form-inline..

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form action="" accept-charset="UTF-8" method="get">
        <div class="input-group">
          <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
          <span class="input-group-btn">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </span> 
        </div>
      </form>
    </div>
  </div>
</div>

Demo: http://www.codeply.com/go/4eu7w6KPkT

Another option - full width input that stacks vertically on xs:

<div class="row">
        <div class="col-md-12">
            <form class="row">
                <div class="col-12 col-sm pr-sm-0">
                    <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
                </div>
                <div class="col-12 col-sm-auto pl-sm-0">
                    <input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
                </div>
            </form>
        </div>
</div>

Demo

Inline form make input text full width and responsive

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}
.flex input {  flex: 1 !important}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="panel panel-primary">  <div class="panel-heading">    <h4>Search Options</h4>  </div>  <div class="panel-body">    <form class="form-inline">      <div class="form-group">        <div class="btn-group">          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                Account ID   <span class="caret"></span>              </button>          <ul class="dropdown-menu">            <li><a href="#">Account ID</a></li>            <li><a href="#">Company Name</a></li>            <li><a href="#">Account Type</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">Marketplaces</a></li>          </ul>        </div>      </div>      <div class="form-group flex">        <input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">        <button type="button" class="btn btn-default"> Filtrer </button>      </div>    </form>  </div></div>

How to make input in a form-inline 100% width?

If you want to ensure they stay on one line and the text input touches the button, consider a form input-group:

<div class="input-group">
   <input type="email" class="form-control">
   <span class="input-group-btn">
      <button class="btn btn-default" type="submit">
          Send invitation
      </button>
   </span>    
</div>

---

Related Topics