如何将Rails表单代码添加到Bootstrap CSS

Question

I'm trying to style a simple Ruby on rails form with the Twitter Bootstrap css but I'm struggling to workout which bits of rails code goes into which part of the Bootstrap css for a form.

For example where would the following line fit into the Bootstrap css for a form? :

<%= f.text_field :company %>

Answer 1

Based on the examples in the Twitter Bootstrap documentation, I am assuming you are attempting to apply the form-control class to your input. If this is the case, you would do it like this.

<%= f.text_field :company, :class => "form-control" %>

See similar question: Using CSS to style Ruby objects in erb

Answer 2

<%= f.text_field :company %>

Actually, this code means "Create a markup input of type text, with the good name (ex: user[company]) so Rails can handle the parameter easily". No more no less.

Example Output:

<input type="text" name="user[company]">

Bootstrap will envelope then this object with a style provided by CSS. So

1- Ensure your css is loaded into your "application.css"

Usually, you'll need to add style for the form

  <%= form_for @resource, html: { class: "form form-inlined" }  do |f| %>

And also around your input text field:

  <div class="form-group">
     <%= f.label :company %>
     <%= f.text_field  :company, class: "form-input" %>
  </div>

This is just an example, but you can see where to put the bootstrap class on each elements.