How do I use the Bootstrap form select css with a Rails model?

Question

I want to use the Bootstrap css to style a "select" box in a form in a Ruby on Rails app.

On the Bootstrap site, they give this as an example:

<select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

However, I can not figure out how to combine this method with my ruby on rails code for the select area I want to do, so that it saves the selected option into the correct column (:ampm here) in my table. This is the code I have currently. It works, but does not have the bootstrap look I want:

 <%= f.label :am_or_pm %> 
 <div class="form-control">
 <%= f.select(:ampm, options_for_select([['AM', 1], ['PM', 2]])) %>
 </div>

I have tried a number of ways to integrate the Bootstrap example with my code, but nothing will work. Any help is appreciated.

Solution 1

First of all, for bootstrap's form-control class to work, you must add it to select tag itself

Per apidoc of rails form select

select(object, method, choices = nil, options = {}, html_options = {}, &block)

you can add html class as

<%= f.select(:ampm, options_for_select([['AM', 1], ['PM', 2]]), {}, {class: "form-control"}) %>

or simply

<%= f.select :ampm, [['AM', 1], ['PM', 2]], {}, {class: "form-control"}) %>

Solution 2

This works for me:

<%= f.select :secretquestion, options_for_select([
  ["Select One", ""], 
  "Your nick name", 
  "your schoool name", 
  "your love name", 
  "your comapnay name", 
  "your favourite website"]), 
  {}, { class: "form form-group form-control" } %>

Comments

[rryyaann22]

Thank you so much! I really appreciate the help. Worked perfectly!

[routeburn]

If you want the little dropdown arrow, use the class "form-select"