root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Require `.form-label` classes on form labels (#30476)

This commit is contained in:
Martijn Cuppens 2020-03-31 20:02:57 +02:00 committed by GitHub
parent a0c2a29a8d
commit df707cd727
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 82 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_button-group.scss
View File

@ -149,8 +149,6 @@
.btn-group-toggle { .btn-group-toggle {
> .btn, > .btn,
> .btn-group > .btn { > .btn-group > .btn {
margin-bottom: 0; // Override default `<label>` value
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
position: absolute; position: absolute;

1
scss/_list-group.scss
View File

@ -46,7 +46,6 @@
position: relative; position: relative;
display: block; display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x; padding: $list-group-item-padding-y $list-group-item-padding-x;
margin-bottom: 0; // for <label> variations
color: $list-group-color; color: $list-group-color;
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
background-color: $list-group-bg; background-color: $list-group-bg;

1
scss/_reboot.scss
View File

@ -381,7 +381,6 @@ th {
label { label {
display: inline-block; // 1 display: inline-block; // 1
margin-bottom: $label-margin-bottom;
} }
// Remove the default `border-radius` that macOS Chrome adds. // Remove the default `border-radius` that macOS Chrome adds.

6
scss/_variables.scss
View File

@ -557,7 +557,11 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease
// Forms // Forms
$label-margin-bottom: .5rem !default; $form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: null !default;
$form-label-color: null !default;
$input-padding-y: $input-btn-padding-y !default; $input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default; $input-padding-x: $input-btn-padding-x !default;

1
scss/forms/_form-check.scss
View File

@ -99,7 +99,6 @@
} }
.form-check-label { .form-check-label {
margin-bottom: 0;
color: $form-check-label-color; color: $form-check-label-color;
cursor: $form-check-label-cursor; cursor: $form-check-label-cursor;
} }

1
scss/forms/_input-group.scss
View File

@ -63,7 +63,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
@include font-size($input-font-size); // Match inputs @include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
line-height: $input-line-height; line-height: $input-line-height;

13
scss/forms/_labels.scss
View File

@ -2,14 +2,25 @@
// Labels // Labels
// //
.form-label {
margin-bottom: $form-label-margin-bottom;
@include font-size($form-label-font-size);
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
color: $form-label-color;
}
// For use with horizontal and inline forms, when you need the label (or legend) // For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls. // text to align with the form controls.
.col-form-label { .col-form-label {
padding-top: add($input-padding-y, $input-border-width); padding-top: add($input-padding-y, $input-border-width);
padding-bottom: add($input-padding-y, $input-border-width); padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<label>/<legend>` default margin-bottom: 0; // Override the `<legend>` default
@include font-size(inherit); // Override the `<legend>` default @include font-size(inherit); // Override the `<legend>` default
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
line-height: $input-line-height; line-height: $input-line-height;
color: $form-label-color;
} }
.col-form-label-lg { .col-form-label-lg {

8
site/content/docs/4.3/components/dropdowns.md
View File

@ -690,11 +690,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
<div class="dropdown-menu"> <div class="dropdown-menu">
<form class="px-4 py-3"> <form class="px-4 py-3">
<div class="mb-3"> <div class="mb-3">
<label for="exampleDropdownFormEmail1">Email address</label> <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com"> <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="exampleDropdownFormPassword1">Password</label> <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div> </div>
<div class="mb-3"> <div class="mb-3">
@ -716,11 +716,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
{{< example >}} {{< example >}}
<form class="dropdown-menu p-4"> <form class="dropdown-menu p-4">
<div class="mb-3"> <div class="mb-3">
<label for="exampleDropdownFormEmail2">Email address</label> <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com"> <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="exampleDropdownFormPassword2">Password</label> <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"> <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div> </div>
<div class="mb-3"> <div class="mb-3">

26
site/content/docs/4.3/examples/checkout/index.html
View File

@ -68,7 +68,7 @@ body_class: "bg-light"
<form class="needs-validation" novalidate> <form class="needs-validation" novalidate>
<div class="row g-3"> <div class="row g-3">
<div class="col-sm-6"> <div class="col-sm-6">
<label for="firstName">First name</label> <label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required> <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Valid first name is required. Valid first name is required.
@ -76,7 +76,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<label for="lastName">Last name</label> <label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required> <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Valid last name is required. Valid last name is required.
@ -84,7 +84,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="username">Username</label> <label for="username" class="form-label">Username</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-text">@</span> <span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" placeholder="Username" required> <input type="text" class="form-control" id="username" placeholder="Username" required>
@ -95,7 +95,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="email">Email <span class="text-muted">(Optional)</span></label> <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com"> <input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter a valid email address for shipping updates. Please enter a valid email address for shipping updates.
@ -103,7 +103,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="address">Address</label> <label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required> <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter your shipping address. Please enter your shipping address.
@ -111,12 +111,12 @@ body_class: "bg-light"
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label> <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite"> <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<label for="country">Country</label> <label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required> <select class="form-select" id="country" required>
<option value="">Choose...</option> <option value="">Choose...</option>
<option>United States</option> <option>United States</option>
@ -127,7 +127,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="state">State</label> <label for="state" class="form-label">State</label>
<select class="form-select" id="state" required> <select class="form-select" id="state" required>
<option value="">Choose...</option> <option value="">Choose...</option>
<option>California</option> <option>California</option>
@ -138,7 +138,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="zip">Zip</label> <label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required> <input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Zip code required. Zip code required.
@ -179,7 +179,7 @@ body_class: "bg-light"
<div class="row gy-3"> <div class="row gy-3">
<div class="col-md-6"> <div class="col-md-6">
<label for="cc-name">Name on card</label> <label for="cc-name" class="form-label">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required> <input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small> <small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback"> <div class="invalid-feedback">
@ -188,7 +188,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="cc-number">Credit card number</label> <label for="cc-number" class="form-label">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required> <input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Credit card number is required Credit card number is required
@ -196,7 +196,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="cc-expiration">Expiration</label> <label for="cc-expiration" class="form-label">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required> <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Expiration date required Expiration date required
@ -204,7 +204,7 @@ body_class: "bg-light"
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="cc-cvv">CVV</label> <label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required> <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Security code required Security code required

1
site/content/docs/4.3/examples/floating-labels/floating-labels.css
View File

@ -35,7 +35,6 @@ body {
left: 0; left: 0;
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
color: #495057; color: #495057;
pointer-events: none; pointer-events: none;
cursor: text; /* Match the input under the label */ cursor: text; /* Match the input under the label */

8
site/content/docs/4.3/forms/form-control.md
View File

@ -10,11 +10,11 @@ toc: true
{{< example >}} {{< example >}}
<div class="mb-3"> <div class="mb-3">
<label for="exampleFormControlInput1">Email address</label> <label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="exampleFormControlTextarea1">Example textarea</label> <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div> </div>
{{< /example >}} {{< /example >}}
@ -75,7 +75,7 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
## Color ## Color
{{< example >}} {{< example >}}
<label for="exampleColorInput">Color picker</label> <label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color"> <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
{{< /example >}} {{< /example >}}
@ -86,7 +86,7 @@ Datalists allow you to create a group of `<option>`s that can be accessed (and a
Learn more about [support for datalist elements](https://caniuse.com/#feat=datalist). Learn more about [support for datalist elements](https://caniuse.com/#feat=datalist).
{{< example >}} {{< example >}}
<label for="exampleDataList">Datalist example</label> <label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."> <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions"> <datalist id="datalistOptions">
<option value="San Francisco"> <option value="San Francisco">

2
site/content/docs/4.3/forms/input-group.md
View File

@ -21,7 +21,7 @@ Place one add-on or button on either side of an input. You may also place one on
<span class="input-group-text" id="basic-addon2">@example.com</span> <span class="input-group-text" id="basic-addon2">@example.com</span>
</div> </div>
<label for="basic-url">Your vanity URL</label> <label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span> <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">

18
site/content/docs/4.3/forms/layout.md
View File

@ -24,11 +24,11 @@ Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or
{{< example >}} {{< example >}}
<div class="mb-3"> <div class="mb-3">
<label for="formGroupExampleInput">Example label</label> <label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder"> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="formGroupExampleInput2">Another label</label> <label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder"> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div> </div>
{{< /example >}} {{< /example >}}
@ -68,34 +68,34 @@ More complex layouts can also be created with the grid system.
{{< example >}} {{< example >}}
<form class="row g-3"> <form class="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<label for="inputEmail4">Email</label> <label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4"> <input type="email" class="form-control" id="inputEmail4">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="inputPassword4">Password</label> <label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4"> <input type="password" class="form-control" id="inputPassword4">
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="inputAddress">Address</label> <label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="inputAddress2">Address 2</label> <label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="inputCity">City</label> <label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity"> <input type="text" class="form-control" id="inputCity">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="inputState">State</label> <label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select"> <select id="inputState" class="form-select">
<option selected>Choose...</option> <option selected>Choose...</option>
<option>...</option> <option>...</option>
</select> </select>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<label for="inputZip">Zip</label> <label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip"> <input type="text" class="form-control" id="inputZip">
</div> </div>
<div class="col-12"> <div class="col-12">

10
site/content/docs/4.3/forms/overview.md
View File

@ -35,12 +35,12 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
{{< example >}} {{< example >}}
<form> <form>
<div class="mb-3"> <div class="mb-3">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="exampleInputPassword1">Password</label> <label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"> <input type="password" class="form-control" id="exampleInputPassword1">
</div> </div>
<div class="mb-3 form-check"> <div class="mb-3 form-check">
@ -64,7 +64,7 @@ Help text should be explicitly associated with the form control it relates to us
Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above. Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
{{< example >}} {{< example >}}
<label for="inputPassword5">Password</label> <label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted"> <small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
@ -105,11 +105,11 @@ By default, browsers will treat all native form controls (`<input>`, `<select>`,
<form> <form>
<fieldset disabled aria-label="Disabled fieldset example"> <fieldset disabled aria-label="Disabled fieldset example">
<div class="mb-3"> <div class="mb-3">
<label for="disabledTextInput">Disabled input</label> <label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="disabledSelect">Disabled select menu</label> <label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select"> <select id="disabledSelect" class="form-select">
<option>Disabled select</option> <option>Disabled select</option>
</select> </select>

6
site/content/docs/4.3/forms/range.md
View File

@ -11,7 +11,7 @@ toc: true
Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
{{< example >}} {{< example >}}
<label for="customRange1">Example range</label> <label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1"> <input type="range" class="form-range" id="customRange1">
{{< /example >}} {{< /example >}}
@ -20,7 +20,7 @@ Create custom `<input type="range">` controls with `.form-range`. The track (the
Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes. Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
{{< example >}} {{< example >}}
<label for="customRange2">Example range</label> <label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2"> <input type="range" class="form-range" min="0" max="5" id="customRange2">
{{< /example >}} {{< /example >}}
@ -29,6 +29,6 @@ Range inputs have implicit values for `min` and `max`—`0` and `100`, respectiv
By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`. By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
{{< example >}} {{< example >}}
<label for="customRange3">Example range</label> <label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
{{< /example >}} {{< /example >}}

50
site/content/docs/4.3/forms/validation.md
View File

@ -34,21 +34,21 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
{{< example >}} {{< example >}}
<form class="row g-3 needs-validation" novalidate> <form class="row g-3 needs-validation" novalidate>
<div class="col-md-4"> <div class="col-md-4">
<label for="validationCustom01">First name</label> <label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required> <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback"> <div class="valid-feedback">
Looks good! Looks good!
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="validationCustom02">Last name</label> <label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required> <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback"> <div class="valid-feedback">
Looks good! Looks good!
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="validationCustomUsername">Username</label> <label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="inputGroupPrepend">@</span> <span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required> <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
@ -58,14 +58,14 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="validationCustom03">City</label> <label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required> <input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid city. Please provide a valid city.
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="validationCustom04">State</label> <label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required> <select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option> <option selected disabled value="">Choose...</option>
<option>...</option> <option>...</option>
@ -75,7 +75,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="validationCustom05">Zip</label> <label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required> <input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid zip. Please provide a valid zip.
@ -130,33 +130,33 @@ While these feedback styles cannot be styled with CSS, you can still customize t
{{< example >}} {{< example >}}
<form class="row g-3"> <form class="row g-3">
<div class="col-md-4"> <div class="col-md-4">
<label for="validationDefault01">First name</label> <label for="validationDefault01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required> <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="validationDefault02">Last name</label> <label for="validationDefault02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required> <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="validationDefaultUsername">Username</label> <label for="validationDefaultUsername" class="form-label">Username</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="inputGroupPrepend2">@</span> <span class="input-group-text" id="inputGroupPrepend2">@</span>
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="validationDefault03">City</label> <label for="validationDefault03" class="form-label">City</label>
<input type="text" class="form-control" id="validationDefault03" required> <input type="text" class="form-control" id="validationDefault03" required>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="validationDefault04">State</label> <label for="validationDefault04" class="form-label">State</label>
<select class="form-select" id="validationDefault04" required> <select class="form-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option> <option selected disabled value="">Choose...</option>
<option>...</option> <option>...</option>
</select> </select>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="validationDefault05">Zip</label> <label for="validationDefault05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required> <input type="text" class="form-control" id="validationDefault05" required>
</div> </div>
<div class="col-12"> <div class="col-12">
@ -180,21 +180,21 @@ We recommend using client-side validation, but in case you require server-side v
{{< example >}} {{< example >}}
<form class="row g-3"> <form class="row g-3">
<div class="col-md-4"> <div class="col-md-4">
<label for="validationServer01">First name</label> <label for="validationServer01" class="form-label">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required> <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback"> <div class="valid-feedback">
Looks good! Looks good!
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="validationServer02">Last name</label> <label for="validationServer02" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required> <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback"> <div class="valid-feedback">
Looks good! Looks good!
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="validationServerUsername">Username</label> <label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="inputGroupPrepend3">@</span> <span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required> <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
@ -204,14 +204,14 @@ We recommend using client-side validation, but in case you require server-side v
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label for="validationServer03">City</label> <label for="validationServer03" class="form-label">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" required> <input type="text" class="form-control is-invalid" id="validationServer03" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid city. Please provide a valid city.
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="validationServer04">State</label> <label for="validationServer04" class="form-label">State</label>
<select class="form-select is-invalid" id="validationServer04" required> <select class="form-select is-invalid" id="validationServer04" required>
<option selected disabled value="">Choose...</option> <option selected disabled value="">Choose...</option>
<option>...</option> <option>...</option>
@ -221,7 +221,7 @@ We recommend using client-side validation, but in case you require server-side v
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label for="validationServer05">Zip</label> <label for="validationServer05" class="form-label">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" required> <input type="text" class="form-control is-invalid" id="validationServer05" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid zip. Please provide a valid zip.
@ -256,7 +256,7 @@ Validation styles are available for the following form controls and components:
{{< example >}} {{< example >}}
<form class="was-validated"> <form class="was-validated">
<div class="mb-3"> <div class="mb-3">
<label for="validationTextarea">Textarea</label> <label for="validationTextarea" class="form-label">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea> <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter a message in the textarea. Please enter a message in the textarea.
@ -311,21 +311,21 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
{{< example >}} {{< example >}}
<form class="row g-3 needs-validation" novalidate> <form class="row g-3 needs-validation" novalidate>
<div class="col-md-4 position-relative"> <div class="col-md-4 position-relative">
<label for="validationTooltip01">First name</label> <label for="validationTooltip01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required> <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip"> <div class="valid-tooltip">
Looks good! Looks good!
</div> </div>
</div> </div>
<div class="col-md-4 position-relative"> <div class="col-md-4 position-relative">
<label for="validationTooltip02">Last name</label> <label for="validationTooltip02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required> <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip"> <div class="valid-tooltip">
Looks good! Looks good!
</div> </div>
</div> </div>
<div class="col-md-4 position-relative"> <div class="col-md-4 position-relative">
<label for="validationTooltipUsername">Username</label> <label for="validationTooltipUsername" class="form-label">Username</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span> <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required> <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
@ -335,14 +335,14 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
</div> </div>
</div> </div>
<div class="col-md-6 position-relative"> <div class="col-md-6 position-relative">
<label for="validationTooltip03">City</label> <label for="validationTooltip03" class="form-label">City</label>
<input type="text" class="form-control" id="validationTooltip03" required> <input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip"> <div class="invalid-tooltip">
Please provide a valid city. Please provide a valid city.
</div> </div>
</div> </div>
<div class="col-md-3 position-relative"> <div class="col-md-3 position-relative">
<label for="validationTooltip04">State</label> <label for="validationTooltip04" class="form-label">State</label>
<select class="form-select" id="validationTooltip04" required> <select class="form-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option> <option selected disabled value="">Choose...</option>
<option>...</option> <option>...</option>
@ -352,7 +352,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
</div> </div>
</div> </div>
<div class="col-md-3 position-relative"> <div class="col-md-3 position-relative">
<label for="validationTooltip05">Zip</label> <label for="validationTooltip05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required> <input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip"> <div class="invalid-tooltip">
Please provide a valid zip. Please provide a valid zip.

1
site/content/docs/4.3/migration.md
View File

@ -103,6 +103,7 @@ Changes to Reboot, typography, tables, and more.
- Dropped support for `.form-control-plaintext` inside `.input-group`s. - Dropped support for `.form-control-plaintext` inside `.input-group`s.
- Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`). - Dropped `.form-text` as existing utilities cover this use class's former use case (e.g., `.mt-2`, `.text-small`, and/or `.text-muted`).
- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. - Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
- Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476)
## Components ## Components