mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00
Code Activity

Simplify input groups by dropping .input-group-prepend and .input-group-append

Browse Source
This commit is contained in:
Martijn Cuppens
2019-12-19 15:28:40 +01:00
parent 9eccb3a230
commit 85b12549ec
8 changed files with 129 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/forms/validation.md
+4 -12
View File
@@ -50,9 +50,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
<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>
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
@@ -142,9 +140,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
<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>
<span class="input-group-text" id="inputGroupPrepend2">@</span>
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
@@ -200,9 +196,7 @@ We recommend using client-side validation, but in case you require server-side v
<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>
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
<div class="invalid-feedback">
Please choose a username.
@@ -329,9 +323,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
<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>
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a unique and valid username.