Skip to content

Commit 669079d

Browse files
coliffjulien-deramond
coliff
and
julien-deramond
authored
Docs: Simplify ids for checks, radios and switches (#41228)
Co-authored-by: Julien Déramond <[email protected]>
1 parent 0f13e1c commit 669079d

File tree

4 files changed

+36
-36
lines changed

4 files changed

+36
-36
lines changed

‎site/content/docs/5.3/examples/cheatsheet-rtl/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -369,8 +369,8 @@ <h3>نظرة عامة</h3>
369369
<input type="file" class="form-control" id="customFile">
370370
</div>
371371
<div class="mb-3 form-check form-switch">
372-
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
373-
<label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label>
372+
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
373+
<label class="form-check-label" for="switchCheckChecked">زر على شكل مفتاح اختيار.</label>
374374
</div>
375375
<div class="mb-3">
376376
<label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label>

‎site/content/docs/5.3/examples/cheatsheet/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -368,8 +368,8 @@ <h3>Overview</h3>
368368
<input type="file" class="form-control" id="customFile">
369369
</div>
370370
<div class="mb-3 form-check form-switch">
371-
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
372-
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
371+
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
372+
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
373373
</div>
374374
<div class="mb-3">
375375
<label for="customRange3" class="form-label">Example range</label>

‎site/content/docs/5.3/examples/sign-in/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
2121
</div>
2222

2323
<div class="form-check text-start my-3">
24-
<input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
25-
<label class="form-check-label" for="flexCheckDefault">
24+
<input class="form-check-input" type="checkbox" value="remember-me" id="checkDefault">
25+
<label class="form-check-label" for="checkDefault">
2626
Remember me
2727
</label>
2828
</div>

‎site/content/docs/5.3/forms/checks-radios.md

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
1919

2020
{{< example >}}
2121
<div class="form-check">
22-
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
23-
<label class="form-check-label" for="flexCheckDefault">
22+
<input class="form-check-input" type="checkbox" value="" id="checkDefault">
23+
<label class="form-check-label" for="checkDefault">
2424
Default checkbox
2525
</label>
2626
</div>
2727
<div class="form-check">
28-
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
29-
<label class="form-check-label" for="flexCheckChecked">
28+
<input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
29+
<label class="form-check-label" for="checkChecked">
3030
Checked checkbox
3131
</label>
3232
</div>
@@ -38,8 +38,8 @@ Checkboxes can utilize the `:indeterminate` pseudo class when manually set via J
3838

3939
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
4040
<div class="form-check">
41-
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
42-
<label class="form-check-label" for="flexCheckIndeterminate">
41+
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
42+
<label class="form-check-label" for="checkIndeterminate">
4343
Indeterminate checkbox
4444
</label>
4545
</div>
@@ -51,20 +51,20 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
5151

5252
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
5353
<div class="form-check">
54-
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
55-
<label class="form-check-label" for="flexCheckIndeterminateDisabled">
54+
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
55+
<label class="form-check-label" for="checkIndeterminateDisabled">
5656
Disabled indeterminate checkbox
5757
</label>
5858
</div>
5959
<div class="form-check">
60-
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
61-
<label class="form-check-label" for="flexCheckDisabled">
60+
<input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
61+
<label class="form-check-label" for="checkDisabled">
6262
Disabled checkbox
6363
</label>
6464
</div>
6565
<div class="form-check">
66-
<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
67-
<label class="form-check-label" for="flexCheckCheckedDisabled">
66+
<input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
67+
<label class="form-check-label" for="checkCheckedDisabled">
6868
Disabled checked checkbox
6969
</label>
7070
</div>
@@ -74,14 +74,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
7474

7575
{{< example >}}
7676
<div class="form-check">
77-
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
78-
<label class="form-check-label" for="flexRadioDefault1">
77+
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
78+
<label class="form-check-label" for="radioDefault1">
7979
Default radio
8080
</label>
8181
</div>
8282
<div class="form-check">
83-
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
84-
<label class="form-check-label" for="flexRadioDefault2">
83+
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
84+
<label class="form-check-label" for="radioDefault2">
8585
Default checked radio
8686
</label>
8787
</div>
@@ -93,14 +93,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
9393

9494
{{< example >}}
9595
<div class="form-check">
96-
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
97-
<label class="form-check-label" for="flexRadioDisabled">
96+
<input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
97+
<label class="form-check-label" for="radioDisabled">
9898
Disabled radio
9999
</label>
100100
</div>
101101
<div class="form-check">
102-
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
103-
<label class="form-check-label" for="flexRadioCheckedDisabled">
102+
<input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
103+
<label class="form-check-label" for="radioCheckedDisabled">
104104
Disabled checked radio
105105
</label>
106106
</div>
@@ -112,20 +112,20 @@ A switch has the markup of a custom checkbox but uses the `.form-switch` class t
112112

113113
{{< example >}}
114114
<div class="form-check form-switch">
115-
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
116-
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
115+
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
116+
<label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
117117
</div>
118118
<div class="form-check form-switch">
119-
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
120-
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
119+
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
120+
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
121121
</div>
122122
<div class="form-check form-switch">
123-
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
124-
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
123+
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
124+
<label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
125125
</div>
126126
<div class="form-check form-switch">
127-
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
128-
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
127+
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
128+
<label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
129129
</div>
130130
{{< /example >}}
131131

@@ -222,8 +222,8 @@ Put your checkboxes, radios, and switches on the opposite side with the `.form-c
222222
</div>
223223

224224
<div class="form-check form-switch form-check-reverse">
225-
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
226-
<label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
225+
<input class="form-check-input" type="checkbox" id="switchCheckReverse">
226+
<label class="form-check-label" for="switchCheckReverse">Reverse switch checkbox input</label>
227227
</div>
228228
{{< /example >}}
229229

0 commit comments

Comments
 (0)