From e6303d45000bf90f3b4e83cec29e698f9a9800e9 Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Thu, 15 Jun 2017 11:28:48 +0200
Subject: [PATCH] Fix duplicate ID in our documentation

---
 docs/4.0/components/collapse.md |  2 +-
 docs/4.0/components/forms.md    | 26 +++++++++++++-------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md
index e1d3e3b644..d72c4b043d 100644
--- a/docs/4.0/components/collapse.md
+++ b/docs/4.0/components/collapse.md
@@ -32,7 +32,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
 </div>
 {% endexample %}
 
-## Multiple triggers / targets
+## Multiple targets
 
 A `<button>` or `<a>` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute.
 Multiple `<button>` or `<a>` can  show and hide an element if they each reference it with their `href` or `data-target` attribute
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 0a5756c4d6..347de49f64 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -478,14 +478,14 @@ You can then remix that once again with size-specific column classes.
 <form>
   <div class="form-row align-items-center">
     <div class="col-sm-3">
-      <label class="sr-only" for="inlineFormInput">Name</label>
-      <input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
+      <label class="sr-only" for="inlineFormInputName">Name</label>
+      <input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInputName" placeholder="Jane Doe">
     </div>
     <div class="col-sm-3">
-      <label class="sr-only" for="inlineFormInputGroup">Username</label>
+      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
       <div class="input-group mb-2 mb-sm-0">
         <div class="input-group-addon">@</div>
-        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
+        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
       </div>
     </div>
     <div class="col-auto">
@@ -542,13 +542,13 @@ You may need to manually address the width and alignment of individual form cont
 
 {% example html %}
 <form class="form-inline">
-  <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">
+  <label class="sr-only" for="inlineFormInputName2">Name</label>
+  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Jane Doe">
 
-  <label class="sr-only" for="inlineFormInputGroup">Username</label>
+  <label class="sr-only" for="inlineFormInputGroupUsername2">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">
+    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
   </div>
 
   <div class="form-check mb-2 mr-sm-2 mb-sm-0">
@@ -565,8 +565,8 @@ Custom form controls and selects are also supported.
 
 {% example html %}
 <form class="form-inline">
-  <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
-  <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
+  <label class="mr-sm-2" for="inlineFormCustomSelectPref">Preference</label>
+  <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelectPref">
     <option selected>Choose...</option>
     <option value="1">One</option>
     <option value="2">Two</option>
@@ -992,12 +992,12 @@ Custom checkboxes and radios are inline to start. Add a parent with class `.cust
 {% example html %}
 <div class="custom-controls-stacked">
   <label class="custom-control custom-radio">
-    <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input">
+    <input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
     <span class="custom-control-indicator"></span>
     <span class="custom-control-description">Toggle this custom radio</span>
   </label>
   <label class="custom-control custom-radio">
-    <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
+    <input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">
     <span class="custom-control-indicator"></span>
     <span class="custom-control-description">Or toggle this other custom radio</span>
   </label>
@@ -1023,7 +1023,7 @@ The file input is the most gnarly of the bunch and require additional JavaScript
 
 {% example html %}
 <label class="custom-file">
-  <input type="file" id="file" class="custom-file-input">
+  <input type="file" id="file2" class="custom-file-input">
   <span class="custom-file-control"></span>
 </label>
 {% endexample %}