How to Use Bootstrap with Drop Down?

Question

The drop down form shows up on the page, but the categories are just awkwardly floating below it and clicking on the drop down form does nothing. If I take out the bootstrap form the drop down form then works perfectly, but it is an ugly default version.

_form.html.erb

<form>
    <select class="form-control">
    <%= f.collection_select :categories, Value::VALUES, :to_s, :to_s, :include_blank => true, class: 'form-control', placeholder: 'Choose Category' %>
  </select>
</form>

value.rb model

class Value < ActiveRecord::Base
    belongs_to :user

    VALUES = ['Courage', 'Determination', 'Gratitude', 'Humor']

end

The whole form

<%= form_for(@value) do |f| %>
  <% if @value.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@value.errors.count, "error") %> prohibited this value from being saved:</h2>

      <ul>
      <% @value.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<div class="america">
<form>
  <div class="form-group">
    <%= f.text_field :name, class: 'form-control', placeholder: 'Enter Value' %>
  </div>
  <select class="form-control">
    <%= f.collection_select :categories, Value::VALUES, :to_s, :to_s, :include_blank => true, class: 'form-control', placeholder: 'Choose Category' %>
  </select>


  <%= button_tag(type: 'submit', class: "btn") do %>
  <span class="glyphicon glyphicon-plus"></span>
  <% end %>

  <%= link_to values_path, class: 'btn' do %>
  <span class="glyphicon glyphicon-chevron-left"></span>
  <% end %>

  <%= link_to @value, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn' do %>
  <span class="glyphicon glyphicon-trash"></span>
  <% end %>
  </form>
</div>
<% end %>

Answer 1

Thank you ptd

<%= f.collection_select :categories, Value::VALUES, :to_s, :to_s, { :include_blank => true }, {class: 'form-control', placeholder: 'Choose Category'} %>