mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-02 11:50:20 +02:00
Code Issues Releases Wiki Activity

Docs: add "Border radius" section for Forms > Input group (#40776)

Browse Source 
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
1 changed files with 12 additions and 0 deletions
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.