Rails Simple Form Bootstrap - checkbox inline vertical alignment - css

Question

I have a rails 4 app with simple form and bootstrap.
I have checkbox elements in my form. I want to align the check box to be vertically aligned with the content in other fields. At the moment the check box is further left than the rest of the content in other fields.
For example:
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
Does anyone know how to make the vertical alignment uniform so that checkboxes are not out to the left of the rest of the form elements?
Thank you
To expand on the above,
I'd like the checkbox to be left aligned in line with the left edge of the other form elements. At the moment, it is further left (like there is some kind of negative margin on that check box element).
I'd like all three of these field inputs to be flush at the left alignment. At the moment, the check box in the two boolean elements is further left than the third text field:
<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?' %>
<br><br>
<%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'question-data' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px', class: 'response-project'} %>
<br>
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>

Answer 1

As doc suggested here http://montrezorro.github.io/bootstrap-checkbox/ You should have data-label in your input so change your input like this:
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label' => 'Do you want experiment logs or methods?' } %>
If you want prepend then :
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label-prepend' => 'Do you want experiment logs or methods?' } %>

Answer 2

I made a custom wrapper like this:
config.wrappers :inline_checkbox, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.optional :readonly
b.wrapper tag: 'div', class: 'col-sm-10 col-sm-offset-2' do |ba|
ba.wrapper tag: 'div', class: 'checkbox' do |baa|
baa.use :input
end
#ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
In my case I wanted a simple inline checkbox with the label to the right to place below another form element. You may need to play with the col-sm-10 col-sm-offset-2. This goes in your SimpleForm initializer (or make a separate one line I did to avoid breaking things in the original). Also you need to restart your app to see the changes take effect.