How to keep a checkbox and label on the same line in a Rails form?

Question

What should I do to keep the label of a checkbox on the same line with the checkbox in a rails view containing a form?

Currently the label goes on the next line:

<

Answer 1

For Bootstrap 4, in HAML

  .form-check
    =f.label :decision_maker, class: 'form-check-label' do
      =f.check_box :decision_maker, class: 'form-check-input'
      Decision Maker

or

  .form-group
    =f.check_box :decision_maker
    =f.label :decision_maker

https://getbootstrap.com/docs/4.3/components/forms/#default-stacked

<div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great </label> </div>

The first way is the more correct way, but the second way looks virtually identical and DRYer.

Answer 2

It looks like you're using Bootstrap, so I recommend adapting your view code to use the horizontal form layout described in this section of the Bootstrap docs: https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form