title: Rails 4, Bootstrap 3, simple_form - form styling not working
body: <p>In the past I have used rails 3.x bootstrap 2.x and simple_form to great success. However, I have tried to created a new (not upgraded) Rails 4 / Bootstrap 3 app and although the simple_form syntax is able to be used and can even use nested forms, it looks as though the styling is not working. I have used rails-bootstrap-forms on a none model based form and that styling looks fine, however, I would prefer to use simple_form for the majority of my forms.</p>
  
  <p>My files look like the following</p>
  
  <p>gem</p>
  
  <pre><code>source 'https://rubygems.org'
  
  gem 'rails', '4.1.6'
  gem 'mysql2'
  gem 'jquery-rails'
  gem 'devise'
  
  gem 'sass-rails'
  gem 'coffee-rails', '~&gt; 4.1.0'
  gem 'bootstrap-sass', '~&gt; 3.2.0'
  gem 'autoprefixer-rails'
  gem 'therubyracer', '0.11.4', :platforms =&gt; :ruby
  gem 'uglifier', '&gt;= 1.3.0'
  gem 'jquery-ui-rails'
  gem 'less-rails'
  gem 'font-awesome-rails'
  gem 'bootstrap_form'
  
  gem 'jbuilder', '~&gt; 2.0'
  gem 'sdoc', '~&gt; 0.4.0',          group: :doc
  
  gem 'jquery-turbolinks'
  gem 'turbolinks', '1.3.0'
  
  #Forms and user entry
  gem 'simple_form'
  gem 'cocoon'
  gem 'country_select'
  gem "ckeditor"
  gem "gon"
  </code></pre>
  
  <p>application.css.scss</p>
  
  <pre><code>/*
   *= require_self
   *= require rails_bootstrap_forms
   *= require font-awesome
   *= require_tree .
   */
  
  @import "bootstrap-sprockets";
  @import "bootstrap";
  </code></pre>
  
  <p>I have the two initializers that have not been altered simple_form.rb and simple_form_bootstrap.rb</p>
  
  <p>and a form looking like the following</p>
  
  <pre><code>&lt;%= simple_form_for @item, :html =&gt; { :class =&gt; 'form-horizontal' } do |f| %&gt;
  
    &lt;% if f.error_notification %&gt;
      &lt;div class="alert alert-error fade in"&gt;
        &lt;a class="close" data-dismiss="alert" href="#"&gt;&amp;times;&lt;/a&gt;
        &lt;%= f.error_notification %&gt;
      &lt;/div&gt;
    &lt;% end %&gt;
  
    &lt;%= f.input :user_id, :as =&gt; :hidden, :input_html =&gt; { :value =&gt; @userid }  %&gt;
    &lt;%= f.association :category %&gt;
    &lt;%= f.input :name %&gt;
    &lt;%= f.input :description %&gt;
  
    &lt;%= f.input :cool %&gt;
    &lt;%= f.input :cold %&gt;
  
  
    &lt;%= f.button :submit, :class =&gt; 'btn-primary' %&gt;
    &lt;%= link_to t('.cancel', :default =&gt; t("helpers.links.cancel")),
                  items_path, :class =&gt; 'btn btn-default' %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>which outputs in the following way</p>
  
  <pre><code>      &lt;div class="control-group hidden item_user_id"&gt;&lt;div class="controls"&gt;&lt;input class="hidden" id="item_user_id" name="item[user_id]" type="hidden" /&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="control-group select optional item_category"&gt;&lt;label class="select optional control-label" for="item_category_id"&gt;Category&lt;/label&gt;&lt;div class="controls"&gt;&lt;select class="select optional" id="item_category_id" name="item[category_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;option selected="selected" value="1"&gt;Option 1&lt;/option&gt;
  &lt;option value="3"&gt;Option 2&lt;/option&gt;
  &lt;option value="4"&gt;Option 3&lt;/option&gt;
        &lt;div class="control-group string optional item_name"&gt;&lt;label class="string optional control-label" for="item_name"&gt;Name&lt;/label&gt;&lt;div class="controls"&gt;&lt;input class="string optional" id="item_name" name="item[name]" type="text" value="Underwear" /&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="control-group string optional item_description"&gt;&lt;label class="string optional control-label" for="item_description"&gt;Description&lt;/label&gt;&lt;div class="controls"&gt;&lt;input class="string optional" id="item_description" name="item[description]" type="text" value="test" /&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="control-group boolean optional item_warm"&gt;&lt;label class="boolean optional control-label" for="item_warm"&gt;Warm&lt;/label&gt;&lt;div class="controls"&gt;&lt;input name="item[warm]" type="hidden" value="0" /&gt;&lt;label class="checkbox"&gt;&lt;input checked="checked" class="boolean optional" id="item_warm" name="item[warm]" type="checkbox" value="1" /&gt;&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div class="control-group boolean optional item_cool"&gt;&lt;label class="boolean optional control-label" for="item_cool"&gt;Cool&lt;/label&gt;&lt;div class="controls"&gt;&lt;input name="item[cool]" type="hidden" value="0" /&gt;&lt;label class="checkbox"&gt;&lt;input checked="checked" class="boolean optional" id="item_cool" name="item[cool]" type="checkbox" value="1" /&gt;&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In particular the checkboxes look really bad as shown below</p>
  
  <p><img src="https://i.stack.imgur.com/SS5B3.png" alt="enter image description here"></p>
  
  <p>Has anyone had any similar issues, or am I just doing something a bit dumb?</p>
  
  <p>any thoughts gratefully accepted</p>