diff --git a/site/docs/4.4/assets/scss/_component-examples.scss b/site/docs/4.4/assets/scss/_component-examples.scss index 169100c340..41360d6c45 100644 --- a/site/docs/4.4/assets/scss/_component-examples.scss +++ b/site/docs/4.4/assets/scss/_component-examples.scss @@ -333,6 +333,10 @@ } } +.bd-example-forms-input-group-workaround .fix-rounded-right { + @include border-right-radius(.2rem !important); +} + // // Code snippets // diff --git a/site/docs/4.4/components/forms.md b/site/docs/4.4/components/forms.md index c138268f91..e57eb580ce 100644 --- a/site/docs/4.4/components/forms.md +++ b/site/docs/4.4/components/forms.md @@ -752,6 +752,12 @@ We currently recommend using custom validation styles, as native browser default {% endcapture %} {% include callout.html content=callout type="warning" %} +{% capture callout %} +##### Input group validation +Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this workaround](#input-group-validation-workaround). +{% endcapture %} +{% include callout.html content=callout type="warning" %} + ### How it works Here's how form validation works with Bootstrap: @@ -976,12 +982,6 @@ Validation styles are available for the following form controls and components: - `.custom-checkbox`s and `.custom-radio`s - `.custom-file` -{% capture callout %} -##### Input group validation -Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this comment for a workaround](https://github.com/twbs/bootstrap/issues/25110#issuecomment-586565165). -{% endcapture %} -{% include callout.html content=callout type="warning" %} - {% capture example %}