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

Docs: add "Border radius" section for Forms > Input group (#40776)
BrowserStack / browserstack (push) Waiting to run Details
Bundlewatch / bundlewatch (push) Waiting to run Details
CodeQL / Analyze (push) Waiting to run Details
cspell / cspell (push) Waiting to run Details
CSS / css (push) Waiting to run Details
Docs / docs (push) Waiting to run Details
JS Tests / JS Tests (push) Waiting to run Details
Lint / lint (push) Waiting to run Details
CSS (node-sass) / css (push) Waiting to run Details
Release notes / update_release_draft (push) Waiting to run Details 

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
Tommaso Allegretti 2025-04-09 20:29:54 +02:00 committed by GitHub
parent c9cb0d679c
commit c147a5d7d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/content/docs/5.3/forms/input-group.md
View File

@ -59,6 +59,18 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
</div>
{{< /example >}}
## Border radius
Due to limitations of browser support at the time, `border-radius` styles can only be applied to the first and last children within the `.input-group` class. Any non-visible element in one of those positions will cause the input group to render incorrectly. This will unfortunately not be fixed until v6 most likely.
{{< example >}}
<div class="input-group">
<span class="input-group-text" id="visible-addon">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="visible-addon">
<input type="text" class="form-control d-none" placeholder="Hidden input" aria-label="Hidden input" aria-describedby="visible-addon">
</div>
{{< /example >}}
## Sizing
Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.