diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d4495a2704..f443e17b7c 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -903,6 +903,7 @@ textarea::-webkit-input-placeholder { .radio label, .checkbox label { + margin-bottom: 0; font-weight: normal; } diff --git a/docs/css.html b/docs/css.html index d7852ed2cb..87c8d4f856 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1185,34 +1185,46 @@ For example, <code><section></code> should be wrapped as inlin

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

- +
+ +

- - +
+ +
+
+ +
-<label class="checkbox">
-  <input type="checkbox" value="">
-  Option one is this and that—be sure to include why it's great
-</label>
+<div class="checkbox">
+  <label>
+    <input type="checkbox" value="">
+    Option one is this and that—be sure to include why it's great
+  </label>
+</div>
 
-<label class="radio">
-  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-  Option one is this and that—be sure to include why it's great
-</label>
-<label class="radio">
-  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-  Option two can be something else and selecting it will deselect option one
-</label>
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+    Option one is this and that—be sure to include why it's great
+  </label>
+</div>
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+    Option two can be something else and selecting it will deselect option one
+  </label>
+</div>
 

Inline checkboxes

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index f72d3b8abe..73ab657a9f 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1125,34 +1125,46 @@ For example, <code><section></code> should be wrapped as inlin

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

- +
+ +

- - +
+ +
+
+ +
-<label class="checkbox">
-  <input type="checkbox" value="">
-  Option one is this and that—be sure to include why it's great
-</label>
+<div class="checkbox">
+  <label>
+    <input type="checkbox" value="">
+    Option one is this and that—be sure to include why it's great
+  </label>
+</div>
 
-<label class="radio">
-  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-  Option one is this and that—be sure to include why it's great
-</label>
-<label class="radio">
-  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-  Option two can be something else and selecting it will deselect option one
-</label>
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+    Option one is this and that—be sure to include why it's great
+  </label>
+</div>
+<div class="radio">
+  <label>
+    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+    Option two can be something else and selecting it will deselect option one
+  </label>
+</div>
 

Inline checkboxes

diff --git a/less/forms.less b/less/forms.less index fe1bb9d408..d96649ef70 100644 --- a/less/forms.less +++ b/less/forms.less @@ -206,6 +206,7 @@ textarea { } .radio label, .checkbox label { + margin-bottom: 0; font-weight: normal; } .radio input[type="radio"],