How to style search form using Twitter Bootstrap 3.3.6 in Rails 4.2.6 Apps

To style the search form as shown in the screenshot, you can style the form as follows:

<%= form_tag(search_path, method: :get, role: 'form') do %>
  <div class='row'>
    <div class="form-group col-xs-6 col-md-4">
      <%= text_field_tag :term, nil, placeholder: 'Type your search term here', class: 'form-control' %> 
      <br>
      <%= submit_tag "Search", class: "btn btn-primary" %>
      <%= submit_tag "Reset", class: "btn btn-default", type: 'reset', value: 'Reset' %>
    </div>
  </div>
<% end %>

The reset button will clear out the text if the user changes mind for the search term.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.