title: Twitter Bootstrap 3 inline and horizontal form
body: <p>I'm trying to migrate my Bootstrap 2 form to Bootstrap 3.<br />
  My current code and fiddle: <a href="http://jsfiddle.net/mavent/Z4TRx/" rel="nofollow noreferrer">http://jsfiddle.net/mavent/Z4TRx/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-sam-main .navbar-toggle{
      z-index:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div class="" id="myDialog1"&gt;
  
      &lt;div class="" id="myDialog2"&gt;
  
          &lt;form role="form" class="" id="contactForm" onsubmit="send(); return false;"&gt;
              &lt;label&gt;Please fill the form&lt;/label&gt;
              &lt;br/&gt;&lt;br/&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="name"&gt;My Label 2&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="name" id="name" required="required" value="myName"&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="email"&gt;My Label 3&lt;/label&gt;
                  &lt;input type="email" class="form-control" name="email" id="email" required="required"&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="message"&gt;My Label 4&lt;/label&gt;
                  &lt;textarea class="form-control" name="message" id="message" required="required"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
  
              &lt;button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px"&gt;Send&lt;/button&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want inline behaviour, my label 2 will be next to text input, my label 3 will be next to text input. I also need horizontal behaviour, my label 4 will be on top of the textarea. My label 2's and my label 3's text box will be 4 column width, my label 4's width will be full width of the form.</p>
  <p><img src="https://i.stack.imgur.com/gtfFM.jpg" alt="enter image description here" /></p>
  <p>How can I do this in Bootstrap 3 ?</p>