Bootstrap 4 integrated full width shape

Question

I have an inline form with a search bar and a search button next to it. How can I get a div to input-groupspan the entire column in Bootstrap 4 and preferably without using custom CSS?

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" 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>

Answer 1

Updated 2018

Remove 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 is to enter a width that fits 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>

demonstration

Answer 2

Bootstrap 4.3 . , .

https://getbootstrap.com/docs/4.3/components/forms/#form-grid

<form class="form" method="get" action="/products">
  <div class="row">
    <div class="col-md-6 offset-md-2">
      <input type="text" class="form-control" name="search" placeholder="search products">
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-outline-primary mb-2">Search</button>
    </div>
  </div>
</form>
<br>

Answer 3

:

Codeply.com, ...

---

flex-fill <div class="form-group">.

, , , Bootstrap 4 input-group-btn input-group-append .

, aria-label .

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="input-group flex-fill">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with sticky button" class="form-control" aria-label="Search this site">
          <div class="input-group-append">
            <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
          </div> 
        </div>
      </form>
    </div>
  </div>
</div>

---

, HTML .

-, div- flex-fill mr-2 <input class="form-control">. .

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/o wrapper div" class="flex-fill mr-2 form-control" aria-label="Search this site">
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

, , HTML;)

<div class="input-group"> (, - CMS), , : -, <div class="input-group"> <div class="flex-fill mr-2">, w-100 <input class="form-control"> , , <div class="input-group-append"> -

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" action="/search" accept-charset="UTF-8" method="get">
        <div class="flex-fill mr-2">
          <input type="search" name="search" id="search" value="" placeholder="Full-width search form with separate button w/ wrapper div" class="form-control w-100" aria-label="Search this site">
        </div>
        <input type="submit" name="commit" value="Search" class="btn btn-primary" data-disable-with="Search">
      </form>
    </div>
  </div>
</div>

---

, , , . , , :