Bootstrap 3.0: How to have text and input on same line?

Question

I'm currently switching my website over to Bootstrap 3.0. I'm having an issue with form input and text formatting. What worked in Bootstrap 2 does not work in Bootstrap 3.

How can I get text on the same line before and after a form input? I have narrowed it down to a problem with the 'form-control" class in the Bootstrap 3 version of the example.

How would I go about getting all the text and input on one line? I would like the bootstrap 3 example to look like the bootstrap 2 example in the jsfiddle.

JS fiddle example

<div class="container ">   <form>       <h3> Format used to look like this in Bootstrap 2 </h3>       <div class="row ">           <label for="return1"><b>Return:</b></label>           <input id="return1" name='return1' class=" input input-sm" style="width:150px"                  type="text" value='8/28/2013'>           <span id='return1' style='color:blue'> +/- 14 Days</span>       </div>         <br>           <br>               <h3> BootStrap 3 Version </h3>        <div class="row">           <label for="return2"><b>Return:</b></label>           <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"                  type="text" value='8/28/2013'>           <span id='return2' style='color:blue'> +/- 14 Days</span>       </div>   </form> 

Update: I change the code to this which works but having trouble with alignment now. Any ideas?

<div class="form-group"> <div class="row">     <div class="col-xs-3">         <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>     </div>     <div class="col-xs-2">         <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">             <option >Economy</option>             <option >Premium Economy</option>             <option >Club World</option>             <option >First Class</option>         </select>     </div>  </div> 

Answer 1

Straight from documentation http://getbootstrap.com/css/#forms-horizontal.

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

Sample:

<form class="form-horizontal">   <div class="form-group">     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>     <div class="col-sm-10">       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">     </div>   </div>   <div class="form-group">     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>     <div class="col-sm-10">       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">     </div>   </div>   <div class="form-group">     <div class="col-sm-offset-2 col-sm-10">       <div class="checkbox">         <label>           <input type="checkbox"> Remember me         </label>       </div>     </div>   </div>   <div class="form-group">     <div class="col-sm-offset-2 col-sm-10">       <button type="submit" class="btn btn-default">Sign in</button>     </div>   </div> </form> 

Answer 2

I would put each element that you want inline inside a separate col-md-* div within your row. Or force your elements to display inline. The form-control class displays block because that's the way bootstrap thinks it should be done.