Simple form not adding bootstrap classes

Question

I've created a new Rails project, added gem 'simple_form', '~> 3.2', '>= 3.2.1' to my gemfile and configured my project to use Bower, than added Bootstrap via Bower.

Even though I used rails generate simple_form:install --bootstrap, the form elements don't get the Bootstrap css classes.

I've checked the HTML after the page is rendered and the Bootstrap css/js are there. Do I need to use Bootstrap gem instead of Bower package??

Here is the .bowerrc file:

{
  "directory": "vendor/assets/components"
}

bower.json

{
  "name": "TesteKlipbox",
  "authors": [
    "Juliano Nunes"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "vendor/assets/components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^3.3.6"
  }
}

Gemfile

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.6'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.15'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc


gem 'simple_form', '~> 3.2', '>= 3.2.1'

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

And the form code:

<%= simple_form_for(@noticia, html: { class: 'form-horizontal' }) do |f| %>
  <% if @noticia.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@noticia.errors.count, "error") %> erros impediram que esta notícia fosse salva:</h2>

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

  <div class="field">
    <%= f.label :titulo %><br>
    <%= f.text_field :titulo %>
  </div>
  <div class="field">
    <%= f.label :texto %><br>
    <%= f.text_area :texto %>
  </div>
  <div class="field">
    <%= f.label :data %><br>
    <%= f.datetime_select :data %>
  </div>
  <div class="field">
    <%= f.label :tags %><br>
    <%= f.text_field :tags %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

UPDATE

Another user has already answered the question. My mistake was that I didn't replace f.text_field by f.input. It has nothing to do with the suggested bootstrap theme question.

Possible duplicate of [How to integrate a Wrap Bootstrap theme into an Rails application?](http://stackoverflow.com/questions/15650627/how-to-integrate-a-wrap-bootstrap-theme-into-an-rails-application) — claudios, Jul 12 '16 at 03:14
Bootstrap css and js are added to the output HTML in the head tag correctly. If I add a bootstrap class manually, it works. The only difference is that I'm using the bower package and it is stored in the vendor directory. — juliano.net, Jul 12 '16 at 03:19
Try changing one of your `f.text_field` to `f.input` and see what happens. — vanburen, Jul 12 '16 at 03:52
@vanburen it worked. That is the piece that was missing. If you could post it as an answer so I can accept it, please. — juliano.net, Jul 12 '16 at 09:26

score 2 · Accepted Answer · answered Jul 12 '16 at 14:00

To start using Simple Form you just have to use the helper it provides:

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

The helper being f.input instead of the Rails helper(s) such as f.text_field, f.text_area etc. See Simple_Form Usage and Rails Form Helpers.

The below image shows the first input using f.text_field and the second using f.input.

score 0 · Answer 2 · answered Jul 12 '16 at 03:08

0

Make sure that bootstrap is stored in the correct location:

bootstrap.min.css as well as bootstrap.css,

bootstrap.min.js and bootstrap.js,

all need to be located in app/assets/stylesheets and app/assets/javascripts respectively.

Add *= require bootstrap to app/assets/stylesheets/application.css and,

add //= require bootstrap to app/assets/javascripts/application.js

answered Jul 12 '16 at 03:08

Vincent Rodomista

760
5
21

They are in the vendor directory, because of the bower settings, but they are referenced and located correctly. – juliano.net Jul 12 '16 at 03:20

Simple form not adding bootstrap classes

UPDATE

2 Answers2