Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?

Question

I trying to format my registration page with Bootstrap 3.1.1. I would like the first two inputs to be on the same line while the other inputs are one there own line. I have played around with the bootstrap classes "row", "form-inline", and "form-horizontal" to no avail.

Does anybody know how to do it?

Here is the Fiddle

<style> .reg_name {  max-width:200px; } </style>   <form name="registration_form" id='registration_form' class="form-inline">          <div class="form-group">             <label for="firstname" class="sr-only"></label>             <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"                    title="Enter first name"                    placeholder="First name"/>         </div>          <div class="form-group">             <label for="lastname" class="sr-only"></label>             <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"                    title="Enter last name"                    placeholder="Last name"/>         </div>      <div class="form-group">         <label for="username" class="sr-only"></label>         <input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"                title="Enter username"                placeholder="Username"/>     </div>      <div class="form-group">         <label for="password" class="sr-only"></label>         <input id="password" class="form-control input-group-lg" type="password" name="password"                title="Enter password"                placeholder="Password"/>     </div>   </form> 

Answer 1

Use <div class="row"> and <div class="form-group col-xs-6">

Here a fiddle :https://jsfiddle.net/core972/SMkZV/2/

Answer 2

You can wrap the inputs in col-* classes

<form name="registration_form" id="registration_form" class="form-horizontal">      <div class="form-group">            <div class="col-sm-6">              <label for="firstname" class="sr-only"></label>              <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name">            </div>                   <div class="col-sm-6">              <label for="lastname" class="sr-only"></label>              <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name">            </div>     </div><!--/form-group-->      <div class="form-group">         <div class="col-sm-12">           <label for="username" class="sr-only"></label>           <input id="username" class="form-control input-group-lg" type="text" autocapitalize="off" name="username" title="Enter username" placeholder="Username">         </div>     </div><!--/form-group-->      <div class="form-group">         <div class="col-sm-12">         <label for="password" class="sr-only"></label>         <input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password">         </div>     </div><!--/form-group-->  </form> 

http://bootply.com/127825