title: bootstrap form-inline to display fields in one row
body: <p>I want my sign in form to display the fields in a row next to each other instead of under each other. </p>
  
  <p>header:</p>
  
  <p>Update: this code works now</p>
  
  <pre><code>&lt;header class="navbar navbar-fixed-top navbar-inverse"&gt;
  &lt;div class="navbar-inner"&gt;
  &lt;div class="container"&gt;
    &lt;%= link_to "Apollo", root_path, id: "logo" %&gt;
    &lt;nav&gt;
      &lt;ul class="nav pull-right"&gt;
  
  &lt;%= form_for(:session, url: sessions_path, :html =&gt; { :class =&gt; "form-inline"}) do |f| %&gt;
    &lt;input id="session_email" name="session[email]" type="text" class="input-medium" placeholder="Email"&gt;
    &lt;input id="session_password" name="session[password]" type="password" class="input-medium" placeholder="Password"&gt;
    &lt;button type="submit" class="btn btn-small btn-primary"&gt;Sign in&lt;/button&gt;
  &lt;% end %&gt;
  
  &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Generated HTML</p>
  
  <pre><code>&lt;header class="navbar navbar-fixed-top navbar-inverse"&gt;
  &lt;div class="navbar-inner"&gt;
  &lt;div class="container"&gt;
    &lt;a href="/" id="logo"&gt;Apollo&lt;/a&gt;
    &lt;nav&gt;
      &lt;ul class="nav pull-right"&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="span2 offset3"&gt;
                &lt;form accept-charset="UTF-8" action="/sessions" method="post"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input name="authenticity_token" type="hidden" value="xmS0FBX+pX8ZzBr/yHIUNmXOQMFI4krsv3FxIl51Hjg=" /&gt;&lt;/div&gt;
  
                    &lt;input id="session_email" name="session[email]" placeholder="Email" size="30" type="text" /&gt;
  
                    &lt;input id="session_password" name="session[password]" placeholder="Password" size="30" type="password" /&gt;
  
                    &lt;input class="btn btn-small btn-primary" name="commit" type="submit" value="Sign in" /&gt;
  
  &lt;/form&gt;                &lt;/div&gt;
            &lt;/div&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Custom CSS.SCSS</p>
  
  <pre><code>@import "bootstrap";
  
  /* mixins, variables, etc. */
  
  $grayMediumLight: #eaeaea;
  
  @mixin box_sizing {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  /* forms */
  
  input, textarea, select, .uneditable-input {
    border: 1px solid #bbb;
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    @include box_sizing;
  }
  
  input {
    height: auto !important;
  }
  </code></pre>