Skip to content

Commit

Permalink
Docs: add Border radius section for Input-group
Browse files Browse the repository at this point in the history
  • Loading branch information
TommasoAllegretti committed Aug 27, 2024
1 parent e3e00b5 commit 9e31375
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions site/content/docs/5.3/forms/input-group.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,18 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
</div>
{{< /example >}}

## Border radius

The `border-radius` is only applied to the first and last children of the element with the `.input-group` class. Any non-visible element in one of those positions will cause the `border-radius` to appear with no style.

{{< 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 style="display: none;" type="text" class="form-control" placeholder="Hidden Input" aria-label="HiddenInput" aria-describedby="invisible-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.
Expand Down

0 comments on commit 9e31375

Please sign in to comment.