Bootstrap: use grid in inline forms

Today,  I am trying to put some bootstrap form controls into one line, and that gives me a bit of headache at first.

The Problem

I have a select box, an input box and a submit button. I want to put them into one line. I started by trying the class “inline-form“. However, that did not really work for me, as is shown in the screenshot below.

The code is

<form class='inline-form'>  
  <select class="form-control" style='width:100%' id="sel1">        
    <option>1</option>   
    <option>2</option>    
    <option>3</option>    
    <option>4</option>  
  </select>    
  <input type="text" class="form-control" id="inlineFormInputGroup"       style='width:100%' placeholder="Username">  
  <button type="submit" class="btn btn-primary">Submit</button> 
</form>

Trail 1: Removing ‘form-control’

We realize that the problem is in the class ‘form-control‘, which displays the elements as blocks. Thus, we tried to remove them (and the style width:100%). That did work: all the elements are on the same line. However, that removed all the css features of a bootstrap form, as is expected.

Thus, we have to put the class back since using the style is the whole point of using Bootstrap. It did not work.

Trial 2: Using Grid System

The next thing we should try is the grid system, which is a triumph of Bootstrap that can is flexible for different screen sizes. The grid system divides a row into 12 columns and you can specify how many columns each element can take. Thus, if we use the form as a row and specify each element’s columns. It will lay in the same line.

However, that did not work with the form-control class. The elements are still displayed in different lines.

The code is shown below. As we can see from the code, we put the form-control class back and added the grid system. The form is defined as a row and the select box has 3 columns, the input 3 column and the button 1 column. We did not use up the 12 columns but it should be fine. All elements should float on the left.

<form class='inline-form row'> 
  <select id="sel1" class='col-md-3 form-control'>    
    <option>1</option>   
    <option>2</option> 
    <option>3</option>
    <option>4</option>
  </select>    
  <input type="text"  id="inlineFormInputGroup"  placeholder="Username" class='col-md-3 form-control'>  
  <button type="submit" class="btn btn-primary form-control col-md-1'>Submit</button> 
</form>

That did not work but put us on the right direction: using the grid system. We still know that it is the problem of the form-control class and now we have to deal with how to use the form-control class and the grid system together.

Solution

After playing with the code for a while. I tried adding <div> outside the elements so it will be the <div>s that directly interact with the grid system and act as an element in the system, not the form elements themselves, which have to carry the form-control class. It worked as a charm, as is shown in the screenshot below.

The code is given below. Using <div> as the agent for the form elements to directly interact with the grid system worked as for putting the elements with form-control class onto the same line.

<form class='inline-form row'><form class='inline-form row'>
  <div class='col-md-3'> 
    <select id="sel1" class='col-md-3 form-control'> 
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div> 
  <div class='col-md-3'>
    <input type="text"  id="inlineFormInputGroup"  placeholder="Username" class='col-md-3 form-control'>    
  </div>    
  <div class='col-md-1'>
    <button type="submit" class="btn btn-primary form-control">Submit</button>
  </div>
</form>