Integrating Bootstrap-looking form controls with Simple Form.
-
Add to your application's Gemfile:
gem 'simple_form-bootstrap'
. The following types of input controls are supported, so long they are properly installed in your application. Ensure that the control is included in yourapplication.js
before the Simple Form-Bootstrap JavaScript.- If you want to use Date/Time pickers, install the
bootstrap3-datetimepicker-rails
gem. - If you want to use the nicely styled Bootstrap Select picker, install the
bootstrap-select-rails
gem. - If you want to use the Token picker, you need to
- Install the
bootstrap_tokenfield_rails
andtwitter-typeahead-rails
gems. - Require
twitter/typeahead
andbootstrap-tokenfield
in that order inapplication.js
. - Require
tokenfield-typeahead
andbootstrap-tokenfield
in that order inapplication.css
. - These extra
@extend
s are needed for Typeahead.js 0.11:.tt-menu { @extend .tt-dropdown-menu; } .tt-suggestion.tt-selectable:hover { @extend .tt-suggestion.tt-cursor; }
- Install the
- If you want to use Date/Time pickers, install the
-
Add to your application's javascript:
//= require simple_form-bootstrap
-
Empty the Simple Form initializer:
# config/initializers/simple_form.rb # Use this setup block to configure all options available in SimpleForm. SimpleForm.setup do |config| end
- You can still put configuration settings in, but it should no longer be necessary.
-
Restart your development server.
- It adds the appropriate button styling to all buttons. By default, the
btn
andbtn-default
styles are added to all buttons. Submit buttons getbtn-primary
instead ofbtn-default
. - It allows
submit
buttons to accept blocks. When a block is specified, the submit button will use a <button> tag instead of an <input> tag.