From 0be876359ed4ed7c8a3d315a6ef9a04eede8d765 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 8 Sep 2016 22:16:28 -0700
Subject: Update docs to use new spacing util class names

---
 docs/components/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 09d0d4f8f..6d8ee54e6 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -845,7 +845,7 @@ Add other states to your custom forms with our validation classes.
     <span class="custom-control-description">Check this custom checkbox</span>
   </label>
 </div>
-<div class="form-group has-danger m-b-0">
+<div class="form-group has-danger mb-0">
   <label class="custom-control custom-checkbox">
     <input type="checkbox" class="custom-control-input">
     <span class="custom-control-indicator"></span>
-- 
cgit v1.2.3


From 7bf868a709d5e278048f7fe5fd62d2fa9365d5bc Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 2 Oct 2016 18:19:47 -0700
Subject: v4: Social meta tags (#20825)

* descriptions for getting started pages

* descriptions for layout

* add content page descriptions

* more descriptions, updates to some existing ones

* correct site url

* add social stuff to config for twitter cards

* add twitter meta tags; use large image for homepage and regular card for all others

* add the assets

* more site config

* more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements
---
 docs/components/forms.md | 1 +
 1 file changed, 1 insertion(+)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 09d0d4f8f..de66cde98 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Forms
+description: Examples and usage guidelines for from controls, form layouts, and custom forms.
 group: components
 ---
 
-- 
cgit v1.2.3


From 2e69dfa8c1679238579ef6f5ec85deb755e4fb6d Mon Sep 17 00:00:00 2001
From: Bardi Harborow <bardi@bardiharborow.com>
Date: Tue, 4 Oct 2016 02:55:59 +1000
Subject: Fix broken/redirected links, moving to HTTPS where possible. (#20557)

---
 docs/components/forms.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index de66cde98..ac5b62e34 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -192,7 +192,7 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
 <div class="form-group row">
   <label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
   <div class="col-xs-10">
-    <input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
+    <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
   </div>
 </div>
 <div class="form-group row">
@@ -340,7 +340,7 @@ Assistive technologies such as screen readers will have trouble with your forms
 
 ### Using the Grid
 
-For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
+For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/#predefined-classes) or [mixins]({{ site.baseurl }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
 
 Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
 
@@ -585,7 +585,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
 {% callout warning %}
 #### Caveat about link functionality of `<a>`
 
-By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](../buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
+By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
 {% endcallout %}
 
 {% callout danger %}
@@ -704,7 +704,7 @@ Here are some examples of the aforementioned classes in action.
 
 Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
 
-Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
+Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
 {% endcallout %}
 {% endcomment %}
 
-- 
cgit v1.2.3


From 55e130f88f8372bd70cfb60ae360376c98ff6b97 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 9 Oct 2016 16:16:13 -0700
Subject: Update static form control

- Remove margin-bottom override in favor of .mb-0 utility class
- Apply the input line-height styles to match
- Remove the min-height to match the input
---
 docs/components/forms.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index c7da5c0fd..a2d59d920 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -516,14 +516,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
 
 ## Static controls
 
-When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
+When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice. Using an element like `<p>` with a default margin? Be sure to use a margin override (as shown below).
 
 {% example html %}
 <form>
   <div class="form-group row">
     <label class="col-sm-2 col-form-label">Email</label>
     <div class="col-sm-10">
-      <p class="form-control-static">email@example.com</p>
+      <p class="form-control-static mb-0">email@example.com</p>
     </div>
   </div>
   <div class="form-group row">
-- 
cgit v1.2.3


From 3fa312ccdf799dba3fd7bc4802b5e21b5bed3467 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 9 Oct 2016 16:40:56 -0700
Subject: Use correct class for validation coloring on label elements

---
 docs/components/forms.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index a2d59d920..99f0d9a63 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -710,19 +710,19 @@ Ensure that an alternative indication of state is also provided. For instance, y
 
 {% example html %}
 <div class="form-group has-success">
-  <label class="col-form-label" for="inputSuccess1">Input with success</label>
+  <label class="form-control-label" for="inputSuccess1">Input with success</label>
   <input type="text" class="form-control form-control-success" id="inputSuccess1">
   <div class="form-control-feedback">Success! You've done it.</div>
   <small class="form-text text-muted">Example help text that remains unchanged.</small>
 </div>
 <div class="form-group has-warning">
-  <label class="col-form-label" for="inputWarning1">Input with warning</label>
+  <label class="form-control-label" for="inputWarning1">Input with warning</label>
   <input type="text" class="form-control form-control-warning" id="inputWarning1">
   <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
   <small class="form-text text-muted">Example help text that remains unchanged.</small>
 </div>
 <div class="form-group has-danger">
-  <label class="col-form-label" for="inputDanger1">Input with danger</label>
+  <label class="form-control-label" for="inputDanger1">Input with danger</label>
   <input type="text" class="form-control form-control-danger" id="inputDanger1">
   <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
   <small class="form-text text-muted">Example help text that remains unchanged.</small>
-- 
cgit v1.2.3


From ab49e3f7e69e7f10a1730a5d52ffd155b5b736de Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 27 Oct 2016 08:58:12 -0700
Subject: fixes #21000: Remove margin from static form control example

---
 docs/components/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 99f0d9a63..040f4f7e5 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -539,7 +539,7 @@ When you need to place plain text next to a form label within a form, use the `.
 <form class="form-inline">
   <div class="form-group">
     <label class="sr-only">Email</label>
-    <p class="form-control-static">email@example.com</p>
+    <p class="form-control-static mb-0">email@example.com</p>
   </div>
   <div class="form-group">
     <label for="inputPassword2" class="sr-only">Password</label>
-- 
cgit v1.2.3


From a6cd4937af4c095714095ca2b0ac457a6d5ebb92 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 28 Oct 2016 16:36:09 -0700
Subject: rework some copy

---
 docs/components/forms.md | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 040f4f7e5..cf5a8473e 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -682,7 +682,11 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
 
 ## Validation
 
-Bootstrap includes validation styles for danger, warning, and success states on form controls. Here's a rundown of how they work:
+Bootstrap includes validation styles for danger, warning, and success states on most form controls.
+
+### How it works
+
+Here's a rundown of how they work:
 
 - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.col-form-label`, `.form-control`, or custom form element will receive the validation styles.
 - Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state.
@@ -690,14 +694,14 @@ Bootstrap includes validation styles for danger, warning, and success states on
 - You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
 - Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass.
 
+### Defining states
+
 Generally speaking, you'll want to use a particular state for specific types of feedback:
 
 - **Danger** is great for when there's a blocking or required field. A user *must* fill in this field properly to submit the form.
 - **Warning** works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form.
 - And lastly, **success** is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields.
 
-Here are some examples of the aforementioned classes in action.
-
 {% comment %}
 {% callout warning %}
 #### Conveying validation state to assistive technologies and colorblind users
@@ -708,6 +712,10 @@ Ensure that an alternative indication of state is also provided. For instance, y
 {% endcallout %}
 {% endcomment %}
 
+### Examples
+
+Here are some examples of the aforementioned classes in action. First up is your standard left-aligned fields with labels, help text, and validation messaging.
+
 {% example html %}
 <div class="form-group has-success">
   <label class="form-control-label" for="inputSuccess1">Input with success</label>
-- 
cgit v1.2.3


From 6a11ae580d0e233449aefdaf250b08019d7fe96d Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 28 Oct 2016 16:38:30 -0700
Subject: add horizontal form examples

---
 docs/components/forms.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index cf5a8473e..2a2e9f9d2 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -737,6 +737,41 @@ Here are some examples of the aforementioned classes in action. First up is your
 </div>
 {% endexample %}
 
+Those same states can also be used with horizontal forms.
+
+{% example html %}
+<div class="container">
+  <form>
+    <div class="form-group row has-success">
+      <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
+      <div class="col-sm-10">
+        <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name@example.com">
+        <div class="form-control-feedback">Success! You've done it.</div>
+        <small class="form-text text-muted">Example help text that remains unchanged.</small>
+      </div>
+    </div>
+    <div class="form-group row has-warning">
+      <label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
+      <div class="col-sm-10">
+        <input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name@example.com">
+        <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
+        <small class="form-text text-muted">Example help text that remains unchanged.</small>
+      </div>
+    </div>
+    <div class="form-group row has-danger">
+      <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
+      <div class="col-sm-10">
+        <input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name@example.com">
+        <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
+        <small class="form-text text-muted">Example help text that remains unchanged.</small>
+      </div>
+    </div>
+  </form>
+</div>
+{% endexample %}
+
+Checkboxes and radios are also supported.
+
 {% example html %}
 <div class="form-check has-success">
   <label class="form-check-label">
-- 
cgit v1.2.3


From cec0c7c6d6c6926dd372a91172c0081bb09fcc09 Mon Sep 17 00:00:00 2001
From: Eric Nolte <eric.nolte@markit.com>
Date: Fri, 4 Nov 2016 10:54:34 -0600
Subject: Update docs to reflect new breakpoint naming convention

---
 docs/components/forms.md | 64 ++++++++++++++++++++++++------------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 2a2e9f9d2..00b7dc250 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -172,80 +172,80 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
 
 {% example html %}
 <div class="form-group row">
-  <label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
-  <div class="col-xs-10">
+  <label for="example-text-input" class="col-2 col-form-label">Text</label>
+  <div class="col-10">
     <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-search-input" class="col-xs-2 col-form-label">Search</label>
-  <div class="col-xs-10">
+  <label for="example-search-input" class="col-2 col-form-label">Search</label>
+  <div class="col-10">
     <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-email-input" class="col-xs-2 col-form-label">Email</label>
-  <div class="col-xs-10">
+  <label for="example-email-input" class="col-2 col-form-label">Email</label>
+  <div class="col-10">
     <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
-  <div class="col-xs-10">
+  <label for="example-url-input" class="col-2 col-form-label">URL</label>
+  <div class="col-10">
     <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-tel-input" class="col-xs-2 col-form-label">Telephone</label>
-  <div class="col-xs-10">
+  <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
+  <div class="col-10">
     <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-password-input" class="col-xs-2 col-form-label">Password</label>
-  <div class="col-xs-10">
+  <label for="example-password-input" class="col-2 col-form-label">Password</label>
+  <div class="col-10">
     <input class="form-control" type="password" value="hunter2" id="example-password-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-number-input" class="col-xs-2 col-form-label">Number</label>
-  <div class="col-xs-10">
+  <label for="example-number-input" class="col-2 col-form-label">Number</label>
+  <div class="col-10">
     <input class="form-control" type="number" value="42" id="example-number-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-datetime-local-input" class="col-xs-2 col-form-label">Date and time</label>
-  <div class="col-xs-10">
+  <label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
+  <div class="col-10">
     <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-date-input" class="col-xs-2 col-form-label">Date</label>
-  <div class="col-xs-10">
+  <label for="example-date-input" class="col-2 col-form-label">Date</label>
+  <div class="col-10">
     <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-month-input" class="col-xs-2 col-form-label">Month</label>
-  <div class="col-xs-10">
+  <label for="example-month-input" class="col-2 col-form-label">Month</label>
+  <div class="col-10">
     <input class="form-control" type="month" value="2011-08" id="example-month-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-week-input" class="col-xs-2 col-form-label">Week</label>
-  <div class="col-xs-10">
+  <label for="example-week-input" class="col-2 col-form-label">Week</label>
+  <div class="col-10">
     <input class="form-control" type="week" value="2011-W33" id="example-week-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-time-input" class="col-xs-2 col-form-label">Time</label>
-  <div class="col-xs-10">
+  <label for="example-time-input" class="col-2 col-form-label">Time</label>
+  <div class="col-10">
     <input class="form-control" type="time" value="13:45:00" id="example-time-input">
   </div>
 </div>
 <div class="form-group row">
-  <label for="example-color-input" class="col-xs-2 col-form-label">Color</label>
-  <div class="col-xs-10">
+  <label for="example-color-input" class="col-2 col-form-label">Color</label>
+  <div class="col-10">
     <input class="form-control" type="color" value="#563d7c" id="example-color-input">
   </div>
 </div>
@@ -630,14 +630,14 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
 
 {% example html %}
 <div class="row">
-  <div class="col-xs-2">
-    <input type="text" class="form-control" placeholder=".col-xs-2">
+  <div class="col-2">
+    <input type="text" class="form-control" placeholder=".col-2">
   </div>
-  <div class="col-xs-3">
-    <input type="text" class="form-control" placeholder=".col-xs-3">
+  <div class="col-3">
+    <input type="text" class="form-control" placeholder=".col-3">
   </div>
-  <div class="col-xs-4">
-    <input type="text" class="form-control" placeholder=".col-xs-4">
+  <div class="col-4">
+    <input type="text" class="form-control" placeholder=".col-4">
   </div>
 </div>
 {% endexample %}
-- 
cgit v1.2.3


From b4dbc69f0edba28ea1a9be4aacb3e9f68c3604a9 Mon Sep 17 00:00:00 2001
From: Bardi Harborow <bardi@bardiharborow.com>
Date: Tue, 8 Nov 2016 23:36:04 +1100
Subject: Fix broken and redirected links.

---
 docs/components/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 2a2e9f9d2..8d758c15e 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -585,7 +585,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
 {% callout warning %}
 #### Caveat about link functionality of `<a>`
 
-By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
+By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
 {% endcallout %}
 
 {% callout danger %}
-- 
cgit v1.2.3


From e17e75b7574d6877facb0eadd977c025a09fd749 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sat, 26 Nov 2016 16:55:18 -0800
Subject: Update inline forms (updated docs and new flexbox styles) (#21212)

* fix form-inline with flex enabled
* grunt
* fix alignment of labels
* shorter if syntax
* add new form example to docs for now
* update inline form docs usage guidelines
* responsive margins
* better margin utils
* fix sizing of .form-check
* flexbox alignment of .form-check
* no need to change direction
* support custom controls in inline form, for default and flex modes
* add example of custom select and checks to docs
* remove hidden and visible label variants since we cover that in the usage guidelines at the start and include hidden labels everywhere
* use property value instead of layout name
* apply to all labels
* add a visible label, space it out
* add id
---
 docs/components/forms.md | 72 +++++++++++++++++++++---------------------------
 1 file changed, 32 insertions(+), 40 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 8915c9e7b..dd3e0027f 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -274,62 +274,54 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
 
 ### Inline forms
 
-Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
+Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
 
-- Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
-- Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
-- Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices.
+- Controls are `display: inline-block` (or `flex` when enabled) to provide alignment control via `vertical-align` and `margin`. Those also means you'll have some HTML character spaces between elements by default.
+- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
+- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
 
-Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a `<label>` with each form control.
-
-#### Visible labels
+You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
 
 {% example html %}
 <form class="form-inline">
-  <div class="form-group">
-    <label for="exampleInputName2">Name</label>
-    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
-  </div>
-  <div class="form-group">
-    <label for="exampleInputEmail2">Email</label>
-    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
-  </div>
-  <button type="submit" class="btn btn-primary">Send invitation</button>
-</form>
-{% endexample %}
+  <label class="sr-only" for="inlineFormInput">Name</label>
+  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
 
-#### Hidden labels
-
-{% example html %}
-<form class="form-inline">
-  <div class="form-group">
-    <label class="sr-only" for="exampleInputEmail3">Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
-  </div>
-  <div class="form-group">
-    <label class="sr-only" for="exampleInputPassword3">Password</label>
-    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
+  <label class="sr-only" for="inlineFormInputGroup">Username</label>
+  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
+    <div class="input-group-addon">@</div>
+    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
   </div>
-  <div class="form-check">
+
+  <div class="form-check mb-2 mr-sm-2 mb-sm-0">
     <label class="form-check-label">
       <input class="form-check-input" type="checkbox"> Remember me
     </label>
   </div>
-  <button type="submit" class="btn btn-primary">Sign in</button>
+
+  <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 {% endexample %}
 
+Custom form controls and selects are also supported.
+
 {% example html %}
 <form class="form-inline">
-  <div class="form-group">
-    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
-    <div class="input-group">
-      <div class="input-group-addon">$</div>
-      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
-      <div class="input-group-addon">.00</div>
-    </div>
-  </div>
-  <button type="submit" class="btn btn-primary">Transfer cash</button>
+  <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
+  <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
+    <option selected>Choose...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+
+  <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
+    <input type="checkbox" class="custom-control-input">
+    <span class="custom-control-indicator"></span>
+    <span class="custom-control-description">Remember my preference</span>
+  </label>
+
+  <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 {% endexample %}
 
-- 
cgit v1.2.3


From 8250bd1b2175fcab70401dcc987cee6054b25556 Mon Sep 17 00:00:00 2001
From: Brad Kent <bkfake-github@yahoo.com>
Date: Mon, 28 Nov 2016 22:56:49 -0600
Subject: Fix #20936 make inline checkbox/radio markup same as stacked (#20995)

* #20936 make inline checkbox/radio markup same as stacked

* tweak language and remove extra blank line in snippet
---
 docs/components/forms.md | 53 +++++++++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 21 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index dd3e0027f..4cbf20412 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -152,8 +152,7 @@ Below is a complete list of the specific form controls supported by Bootstrap an
     <tr>
       <td class="text-nowrap">
 {% markdown %}
-`.form-check`<br>
-`.form-check-inline`
+`.form-check`
 {% endmarkdown %}
       </td>
       <td class="text-nowrap">
@@ -463,30 +462,42 @@ By default, any number of checkboxes and radios that are immediate sibling will
 
 ### Inline
 
-Groups of checkboxes or radios that appear on the same horizontal row are similar to their stacked counterparts, but require different HTML and a single class. To switch from stacked to inline, drop the surrounding `<div>`, add `.form-check-inline` to the `<label>`, and keep the `.form-check-input` on the `<input>`.
+Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
 
 {% example html %}
-<label class="form-check-inline">
-  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
-</label>
-<label class="form-check-inline">
-  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
-</label>
-<label class="form-check-inline">
-  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3
-</label>
+<div class="form-check form-check-inline">
+  <label class="form-check-label">
+    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
+  </label>
+</div>
+<div class="form-check form-check-inline">
+  <label class="form-check-label">
+    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
+  </label>
+</div>
+<div class="form-check form-check-inline disabled">
+  <label class="form-check-label">
+    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
+  </label>
+</div>
 {% endexample %}
 
 {% example html %}
-<label class="form-check-inline">
-  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
-</label>
-<label class="form-check-inline">
-  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
-</label>
-<label class="form-check-inline">
-  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
-</label>
+<div class="form-check form-check-inline">
+  <label class="form-check-label">
+    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+  </label>
+</div>
+<div class="form-check form-check-inline">
+  <label class="form-check-label">
+    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+  </label>
+</div>
+<div class="form-check form-check-inline disabled">
+  <label class="form-check-label">
+    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
+  </label>
+</div>
 {% endexample %}
 
 ### Without labels
-- 
cgit v1.2.3


From c1cf6310f2c9ea2ff57de83fd64e7e99e0426b8f Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 20 Dec 2016 14:46:45 -0800
Subject: remove .mb-0 from static form controls to follow up #21270

---
 docs/components/forms.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 4cbf20412..4d2282d3f 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -519,14 +519,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
 
 ## Static controls
 
-When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice. Using an element like `<p>` with a default margin? Be sure to use a margin override (as shown below).
+When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice.
 
 {% example html %}
 <form>
   <div class="form-group row">
     <label class="col-sm-2 col-form-label">Email</label>
     <div class="col-sm-10">
-      <p class="form-control-static mb-0">email@example.com</p>
+      <p class="form-control-static">email@example.com</p>
     </div>
   </div>
   <div class="form-group row">
@@ -542,7 +542,7 @@ When you need to place plain text next to a form label within a form, use the `.
 <form class="form-inline">
   <div class="form-group">
     <label class="sr-only">Email</label>
-    <p class="form-control-static mb-0">email@example.com</p>
+    <p class="form-control-static">email@example.com</p>
   </div>
   <div class="form-group">
     <label for="inputPassword2" class="sr-only">Password</label>
-- 
cgit v1.2.3


From 855a67b1d6364be9bf730871dd4914d8d760589d Mon Sep 17 00:00:00 2001
From: Bardi Harborow <bardi@bardiharborow.com>
Date: Fri, 23 Dec 2016 08:41:31 +1100
Subject: Remove IE9 browser hacks. (#21393)

---
 docs/components/forms.md | 2 --
 1 file changed, 2 deletions(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 4d2282d3f..f40d79fce 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -933,8 +933,6 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
 </select>
 {% endexample %}
 
-Custom selects degrade nicely in IE9, receiving only a handful of overrides to remove the custom `background-image`. **Multiple selects (e.g., `<select multiple>`) are not currently supported.**
-
 ### File browser
 
 The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
-- 
cgit v1.2.3


From 43ef8b129e6a2d74408b22d55c213d781f9e929a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 24 Dec 2016 14:11:03 -0800
Subject: fixes #21423 by updating docs to mention flex display instead of
 inline-block; clarifies follow-up text about use of the proper utilities

---
 docs/components/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index f40d79fce..bbf55eda8 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -275,7 +275,7 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
 
 Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.
 
-- Controls are `display: inline-block` (or `flex` when enabled) to provide alignment control via `vertical-align` and `margin`. Those also means you'll have some HTML character spaces between elements by default.
+- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/utilities/flexbox/) utilities.
 - Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
 - Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
 
-- 
cgit v1.2.3


From 2cad717634bcf64845d086ba8539edd4b999cc45 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 25 Dec 2016 14:18:54 -0800
Subject: space that out a smidge

---
 docs/components/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index bbf55eda8..46217e383 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -675,7 +675,7 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
 <form class="form-inline">
   <div class="form-group">
     <label for="inputPassword4">Password</label>
-    <input type="password" id="inputPassword4" class="form-control" aria-describedby="passwordHelpInline">
+    <input type="password" id="inputPassword4" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
     <small id="passwordHelpInline" class="text-muted">
       Must be 8-20 characters long.
     </small>
-- 
cgit v1.2.3


From 308114f65c090bb64687911bea393a1ffc4b85fc Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 25 Dec 2016 14:38:06 -0800
Subject: throw some margin utils to fix spacing

---
 docs/components/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components/forms.md')

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 46217e383..88bd37dc2 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -544,7 +544,7 @@ When you need to place plain text next to a form label within a form, use the `.
     <label class="sr-only">Email</label>
     <p class="form-control-static">email@example.com</p>
   </div>
-  <div class="form-group">
+  <div class="form-group mx-sm-3">
     <label for="inputPassword2" class="sr-only">Password</label>
     <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
   </div>
-- 
cgit v1.2.3