Allow aligning a check box with the left edge in a horizontal layout.

README.md

@@ -1090,8 +1090,8 @@ To use a horizontal-layout form with labels to the left of the control, use the
 `layout: :horizontal` option. You should specify both `label_col` and
 `control_col` css classes as well (they default to `col-sm-2` and `col-sm-10`).
 
-In the example below, the checkbox and submit button have been wrapped in a
-`form_group` to keep them properly aligned.
+In the example below, the submit button has been wrapped in a `form_group` to
+keep it properly aligned.
 
 ![Example 38](demo/doc/screenshots/bootstrap/readme/38_example.png "Example 38")
 ```erb
@@ -1144,7 +1144,8 @@ The `label_col` and `control_col` css classes can also be changed per control:
 ```erb
 <%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
   <%= f.email_field :email %>
-  <%= f.text_field :age, control_col: "col-sm-3" %>
+  <%= f.text_field :age, label_col: "col-sm-3", control_col: "col-sm-3" %>
+  <%= f.check_box :terms, label_col: "", control_col: "col-sm-11" %>
   <%= f.form_group do %>
     <%= f.submit %>
   <% end %>
@@ -1162,11 +1163,20 @@ This generates:
     </div>
   </div>
   <div class="mb-3 row">
-    <label class="form-label col-form-label col-sm-2" for="user_age">Age</label>
+    <label class="form-label col-form-label col-sm-3" for="user_age">Age</label>
     <div class="col-sm-3">
       <input class="form-control" id="user_age" name="user[age]" type="text" value="42">
     </div>
   </div>
+  <div class="mb-3 row">
+    <div class="col-sm-10">
+      <div class="form-check">
+        <input autocomplete="off" name="user[terms]" type="hidden" value="0">
+        <input class="form-check-input" control_col="col-sm-11" id="user_terms" label_col="" name="user[terms]" type="checkbox" value="1">
+        <label class="form-check-label" for="user_terms">Terms</label>
+      </div>
+    </div>
+  </div>
   <div class="mb-3 row">
     <div class="col-sm-10 offset-sm-2">
       <input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
@@ -1240,11 +1250,12 @@ The form-level `layout` can be overridden per field, unless the form-level layou
 ```erb
 <%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
   <%= f.email_field :email %>
-  <%= f.text_field :feet, layout: :default %>
-  <%= f.text_field :inches, layout: :default %>
-  <%= f.form_group do %>
-    <%= f.submit %>
-  <% end %>
+  <div class="row">
+    <div class="col"><%= f.text_field :feet, layout: :default %></div>
+    <div class="col"><%= f.text_field :inches, layout: :default %></div>
+  </div>
+  <%= f.check_box :terms, layout: :default %>
+  <%= f.submit %>
 <% end %>
 ```
 
@@ -1258,19 +1269,28 @@ This generates:
       <input aria-required="true" class="form-control" id="user_email" name="user[email]" required="required" type="email" value="[email protected]">
     </div>
   </div>
-  <div class="mb-3">
-    <label class="form-label" for="user_feet">Feet</label>
-    <input class="form-control" id="user_feet" name="user[feet]" type="text" value="5">
+  <div class="row">
+    <div class="col">
+      <div class="mb-3">
+        <label class="form-label" for="user_feet">Feet</label>
+        <input class="form-control" id="user_feet" name="user[feet]" type="text" value="5">
+      </div>
+    </div>
+    <div class="col">
+      <div class="mb-3">
+        <label class="form-label" for="user_inches">Inches</label>
+        <input class="form-control" id="user_inches" name="user[inches]" type="text" value="7">
+      </div>
+    </div>
   </div>
   <div class="mb-3">
-    <label class="form-label" for="user_inches">Inches</label>
-    <input class="form-control" id="user_inches" name="user[inches]" type="text" value="7">
-  </div>
-  <div class="mb-3 row">
-    <div class="col-sm-10 offset-sm-2">
-      <input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
+    <div class="form-check">
+      <input autocomplete="off" name="user[terms]" type="hidden" value="0">
+      <input class="form-check-input" id="user_terms" layout="default" name="user[terms]" type="checkbox" value="1">
+      <label class="form-check-label" for="user_terms">Terms</label>
     </div>
   </div>
+  <input class="btn btn-secondary" data-disable-with="Create User" name="commit" type="submit" value="Create User">
 </form>
 ```
 

lib/bootstrap_form/form_group.rb

@@ -13,10 +13,8 @@ def form_group(*args, &block)
       tag.div(**options.except(:append, :id, :label, :help, :icon,
                                :input_group_class, :label_col, :control_col,
                                :add_control_col_class, :layout, :prepend, :floating)) do
-        form_group_content(
-          generate_label(options[:id], name, options[:label], options[:label_col], options[:layout]),
-          generate_help(name, options[:help]), options, &block
-        )
+        label = generate_label(options[:id], name, options[:label], options[:label_col], options[:layout])
+        form_group_content(label, generate_help(name, options[:help]), options, &block)
       end
     end
 

lib/bootstrap_form/inputs/check_box.rb

@@ -28,7 +28,7 @@ def wrapper(content, options)
         if layout == :inline && !options[:multiple]
           tag.div(class: "col") { content }
         elsif layout == :horizontal && !options[:multiple]
-          form_group { content }
+          form_group(layout: layout_in_effect(options[:layout]), label_col: options[:label_col]) { content }
         else
           content
         end