I am using the rails-bootstrap-forms gem along with twitter-bootstrap-rails. When I use the bootstrap_form_for function, I get forms that are only partially styled:
<%= bootstrap_form_for([@investor.property, @investor], layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10", role: "form") do |f| %>
<% if @investor.errors.any? %>
<div id="error_explanation">
<h4><%= pluralize(@investor.errors.count, "error") %> prohibited this investor from being saved:</h4>
<ul>
<% @investor.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= f.text_field :name, label: "Name", placeholder: 'Your name here' %>
<%= f.email_field :email, label: "Email", placeholder: 'you@example.com' %>
<%= f.number_field :equity_share, label: "Equity share", placeholder: '% of total equity' %>
<%= f.number_field :priority, label: "Priority", placeholder: 'Payment priority' %>
<%= f.form_group do %>
<%= f.submit "Submit" %>
<% end %>
<% end %>
Generates:
Which you can see applies the horizontal layout but does not format the labels properly. The HTML generated looks good:
<form accept-charset="UTF-8" action="/things/1/investors" class="form-horizontal" id="new_investor" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="QGzNsTGG41FPfnQ6n9yrka7caZayIu4fLpqToX5ASng=" /></div>
<div class="form-group"><label class="control-label col-sm-2" for="investor_name">Name</label><div class="col-sm-10"><input class="form-control" id="investor_name" name="investor[name]" placeholder="Your name here" type="text" /></div></div>
<div class="form-group"><label class="control-label col-sm-2" for="investor_email">Email</label><div class="col-sm-10"><input class="form-control" id="investor_email" name="investor[email]" placeholder="you@example.com" type="email" /></div></div>
<div class="form-group"><label class="control-label col-sm-2" for="investor_equity_share">Equity share</label><div class="col-sm-10"><input class="form-control" id="investor_equity_share" name="investor[equity_share]" placeholder="% of total equity" type="number" /></div></div>
<div class="form-group"><label class="control-label col-sm-2" for="investor_priority">Priority</label><div class="col-sm-10"><input class="form-control" id="investor_priority" name="investor[priority]" placeholder="Payment priority" type="number" /></div></div>
<div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-10">
<input class="btn btn-default" name="commit" type="submit" value="Submit" />
</div></div></form>
And I have not (to my knowledge) overridden any of the Bootstrap CSS or other formatting. The "icon:" command also does not change the output at all, if that's a useful clue. What might be the issue? Thanks in advance.
UPDATE: I have attempted to replace twitter-bootstrap-rails with bootstrap-sass following Brad Werth's suggestion. However, I get an "unclosed block" error in application.css.scss whenever I include the @import "bootstrap"; line. Here is the contents of application.css.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*= require rails_bootstrap_forms
*= require jquery.ui.datepicker
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";
"custom" is just my site's basic css. I only get an error if the @import "bootstrap"; line is included, regardless of other lines or the require statements.
