Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Bootstrap 4 - full width form fields on inline form

Tags:

I've noticed a difference in how in-line forms behave between old Bootstrap v3 and new Bootstrap V4.

I have two code snippets:

Bootstrap 3

In this version, when the page gets narrower, each form element resizes to take up the full width of the page. This no longer happens with Bootstrap 4. I can't see that the Bootstrap 3 docs mentions this full-width behaviour though - but it still does it - as in, the fields still go to full-width on the inline form when they are in a form-group div.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<h1>bootstrap/3.3.6</h1>

<form class='form-inline' role='form' action='search.php' method='post' id='form_search'>
   <input type='hidden' name='method' value='search' />
   <div class='form-group'>
      <input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
   </div>
   <div class='form-group'>
      <select name='mn' id='mn' class='form-control'>
         <option value='n'>Month</option>
         <option  value='1'>January</option>
         <option  value='2'>February</option>
      </select>
   </div>
   <div class='form-group'>
      <select class='form-control' name='yr' id='yr'>
         <option value='n'>Year</option>
         <option  value='1995'>1995</option>
         <option  value='1996'>1996</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='format' id='format' class='form-control'>
         <option value='n'>Format</option>
         <option  value='1'>1</option>
      </select>
   </div>
   <div class='form-group'>
      <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>
   </div>
   <div class='form-group'>
      <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>
   </div>
   <div class='form-group'>
      <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>
   </div>
   <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>

Bootstrap 4

Now when using the same HTML in Bootstrap 4, the full-width behaviour no longer happens. As with Bootstrap 3, I can't see any reference to the full-width form fields on narrower pages on inline forms in the Bootstrap 4 docs though.

<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' />
   <div class='form-group'>
      <input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
   </div>
   <div class='form-group'>
      <select name='mn' id='mn' class='form-control'>
         <option value='n'>Month</option>
         <option  value='1'>January</option>
         <option  value='2'>February</option>
      </select>
   </div>
   <div class='form-group'>
      <select class='form-control' name='yr' id='yr'>
         <option value='n'>Year</option>
         <option  value='1995'>1995</option>
         <option  value='1996'>1996</option>
      </select>
   </div>
   <div class='form-group'>
      <select name='format' id='format' class='form-control'>
         <option value='n'>Format</option>
         <option  value='1'>1</option>
      </select>
   </div>
   <div class='form-group'>
      <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>
   </div>
   <div class='form-group'>
      <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>
   </div>
   <div class='form-group'>
      <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>
   </div>
   <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>

I wondered if anyone is aware of a way to replicate the behaviour in Bootstrap 4, so that the form-fields go full width in the same way they did in Bootstrap 3?

I don't want to remove the class='form-inline' from the form as I wanted to have the form display as inline on wider screens.

like image 362
4532066 Avatar asked Apr 14 '18 07:04

4532066

2 Answers

Just remove '.form-group' div from your code and you need to add media query for 767 resolution. In Bootstrap 4 - input get 100% width below 576px wide screen.

@media (max-width: 767px){
  .form-inline .form-control {
    display: block;
    width: 100%;
  }
}
<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>

Here is Fiddel Demo

like image 93
Minal Chauhan Avatar answered Sep 28 '22 18:09

Minal Chauhan

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>

Solution 2: .input-group instead of .form-group

If you still want to group your input elements, you can change the .form-group elements to .input-group elements. See the section about Multiple Inputs 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' />
   <div class='form-group'>
      <input type='text' class='form-control' id='str' name='str' placeholder = 'Search'>
   </div>
   <div class='input-group'>
      <select name='mn' id='mn' class='form-control'>
         <option value='n'>Month</option>
         <option  value='1'>January</option>
         <option  value='2'>February</option>
      </select>
   </div>
   <div class='input-group'>
      <select class='form-control' name='yr' id='yr'>
         <option value='n'>Year</option>
         <option  value='1995'>1995</option>
         <option  value='1996'>1996</option>
      </select>
   </div>
   <div class='input-group'>
      <select name='format' id='format' class='form-control'>
         <option value='n'>Format</option>
         <option  value='1'>1</option>
      </select>
   </div>
   <div class='input-group'>
      <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>
   </div>
   <div class='input-group'>
      <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>
   </div>
   <div class='input-group'>
      <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>
   </div>
   <button type='submit' class='btn btn-success'><i class="fa fa-search"></i> Search</button>
</form>
like image 24
andreas Avatar answered Sep 28 '22 18:09

andreas
Sign in to Comment

Related questions

Minimal path to form a string
Program type already present: org.apache.http.auth.AuthSchemeFactory
Associations in sequelize not working as intended
How does async-await "save threads"?
Caveats if go package name doesn't start with github.com?
What is the time complexity of accessing an element of a List by index in Dart?
How to mock chain of method calls using Mockito
Permissions for creating OAuth credentials in Google Cloud
NPM Install Error Woes: "npm ERR! code EINVAL"
leaflet marker cluster icons not displaying
Tentative definition of struct with incomplete type
How to change nginx's default homepage via a Dockerfile and then launch it by running a container

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!