I am looking to customize my sign-in form layout by displaying the fields in a row next to each other rather than under each other.
header:
Update: I have successfully implemented this code
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<%= link_to "Apollo", root_path, id: "logo" %>
<nav>
<ul class="nav pull-right">
<%= form_for(:session, url: sessions_path, :html => { :class => "form-inline"}) do |f| %>
<input id="session_email" name="session[email]" type="text" class="input-medium" placeholder="Email">
<input id="session_password" name="session[password]" type="password" class="input-medium" placeholder="Password">
<button type="submit" class="btn btn-small btn-primary">Sign in</button>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
Generated HTML
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a href="/" id="logo">Apollo</a>
<nav>
<ul class="nav pull-right">
<div class="row">
<div class="span2 offset3">
<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="xmS0FBX+pX8ZzBr/yHIUNmXOQMFI4krsv3FxIl51Hjg=" /></div>
<input id="session_email" name="session[email]" placeholder="Email" size="30" type="text" />
<input id="session_password" name="session[password]" placeholder="Password" size="30" type="password" />
<input class="btn btn-small btn-primary" name="commit" type="submit" value="Sign in" />
</form> </div>
</div>
</ul>
</nav>
</div>
</div>
</header>
Custom CSS.SCSS
@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;
}