mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
Bootstrap 5 grid documentation
Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Martijn Cuppens
@@ -32,62 +32,58 @@ For custom Bootstrap form validation messages, you'll need to add the `novalidat
|
||||
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for `<select>`s are only available with `.form-select`, and not `.form-control`.
|
||||
|
||||
{{< example >}}
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="form-row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationCustom01">First name</label>
|
||||
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
<form class="row g-3 needs-validation" novalidate>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustom01">First name</label>
|
||||
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationCustom02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustom02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationCustomUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustomUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationCustom03">City</label>
|
||||
<input type="text" class="form-control" id="validationCustom03" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationCustom04">State</label>
|
||||
<select class="form-select" id="validationCustom04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationCustom05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationCustom05" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustom03">City</label>
|
||||
<input type="text" class="form-control" id="validationCustom03" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="col-md-3">
|
||||
<label for="validationCustom04">State</label>
|
||||
<select class="form-select" id="validationCustom04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationCustom05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationCustom05" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
|
||||
<label class="form-check-label" for="invalidCheck">
|
||||
@@ -98,7 +94,9 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
@@ -132,44 +130,40 @@ Not interested in custom validation feedback messages or writing JavaScript to c
|
||||
While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationDefault01">First name</label>
|
||||
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationDefault02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationDefaultUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend2">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
|
||||
<form class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefault01">First name</label>
|
||||
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefault02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefaultUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend2">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationDefault03">City</label>
|
||||
<input type="text" class="form-control" id="validationDefault03" required>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationDefault04">State</label>
|
||||
<select class="form-select" id="validationDefault04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationDefault05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationDefault05" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationDefault03">City</label>
|
||||
<input type="text" class="form-control" id="validationDefault03" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="col-md-3">
|
||||
<label for="validationDefault04">State</label>
|
||||
<select class="form-select" id="validationDefault04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationDefault05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationDefault05" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
|
||||
<label class="form-check-label" for="invalidCheck2">
|
||||
@@ -177,7 +171,9 @@ While these feedback styles cannot be styled with CSS, you can still customize t
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -186,62 +182,58 @@ While these feedback styles cannot be styled with CSS, you can still customize t
|
||||
We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationServer01">First name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
<form class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="validationServer01">First name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationServer02">Last name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationServer02">Last name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationServerUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationServerUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationServer03">City</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer04">State</label>
|
||||
<select class="form-select is-invalid" id="validationServer04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationServer05">Zip</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationServer03">City</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="col-md-3">
|
||||
<label for="validationServer04">State</label>
|
||||
<select class="form-select is-invalid" id="validationServer04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationServer05">Zip</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
|
||||
<label class="form-check-label" for="invalidCheck3">
|
||||
@@ -252,7 +244,9 @@ We recommend using client-side validation, but in case you require server-side v
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -317,62 +311,60 @@ Validation styles are available for the following form controls and components:
|
||||
If your form layout allows it, you can swap the `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
|
||||
|
||||
{{< example >}}
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="form-row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationTooltip01">First name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
<form class="row g-3 needs-validation" novalidate>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltip01">First name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationTooltip02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltip02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationTooltipUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please choose a unique and valid username.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltipUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please choose a unique and valid username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationTooltip03">City</label>
|
||||
<input type="text" class="form-control" id="validationTooltip03" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationTooltip04">State</label>
|
||||
<select class="form-select" id="validationTooltip04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-tooltip">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationTooltip05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationTooltip05" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
<div class="col-md-6 position-relative">
|
||||
<label for="validationTooltip03">City</label>
|
||||
<input type="text" class="form-control" id="validationTooltip03" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
<div class="col-md-3 position-relative">
|
||||
<label for="validationTooltip04">State</label>
|
||||
<select class="form-select" id="validationTooltip04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-tooltip">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 position-relative">
|
||||
<label for="validationTooltip05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationTooltip05" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user