skip to Main Content

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 %>

2

Answers


  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

    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search