CODEWITHSUNDEEP
twitter-bootstrap
Leo Costa
Leo Costa

Reputation: 371

Side by Side Form Field Bootstrap

I'm using Bootstrap 3.0.3 and following the CSS documentation (http://getbootstrap.com/css/#forms) to implement a inline form-field.

My HTML is:

<form class="form-inline" role="form">
  <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
    <div class="form-group">
      <div><%= f.label :login %>
      <%= f.text_field :login %></div>
    </div>
    <div class="form-group">
      <div><%= f.label :password %><br />
      <%= f.password_field :password %></div>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  <% end %>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Generated HTML:

<form class="form-inline" role="form">
  <div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="**" type="hidden"></div>
    <div class="form-group">
      <div><label for="user_login">Login</label>
      <input id="user_login" name="user[login]" type="text"></div>
    </div>
    <div class="form-group">
      <div><label for="user_password">Password</label><br>
      <input id="user_password" name="user[password]" type="password"></div>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
</form>  <button type="submit" class="btn btn-default">Sign in</button>

However my result is: enter image description here

Upvotes: 0

Views: 10544

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

I think it's because you have missed this class to your input controls: class="form-control"

Consider to add the placeholder and the class="sr-only" on the labels.

Ref: http://getbootstrap.com/css/#forms-inline

Code:

<form class="form-inline" role="form">
  <div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="**" type="hidden"></div>
    <div class="form-group">
      <div><label lass="sr-only" for="user_login">Login</label>
      <input id="user_login" name="user[login]" type="text" class="form-control"></div>
    </div>
    <div class="form-group">
      <div><label lass="sr-only" for="user_password">Password</label><br>
      <input id="user_password" name="user[password]" type="password" class="form-control"></div>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
 <button type="submit" class="btn btn-default">Sign in</button><form/>

Demo: http://jsfiddle.net/IrvinDominin/4vsDa/

Upvotes: 2

Related Questions