diff options
Diffstat (limited to 'docs/4.0')
| -rw-r--r-- | docs/4.0/components/forms.md | 8 |
1 files changed, 3 insertions, 5 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 980596e8c..634b3288c 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -360,9 +360,7 @@ More complex layouts can also be created with the grid system. #### Horizontal form -Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. - -Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements. +Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline. @@ -382,7 +380,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe </div> <fieldset class="form-group"> <div class="row"> - <legend class="col-form-legend col-sm-2 pt-0">Radios</legend> + <legend class="col-form-label col-sm-2 pt-0">Radios</legend> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> @@ -425,7 +423,7 @@ At times, you maybe need to use margin or padding utilities to create that perfe ##### Horizontal form label sizing -Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`. +Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`. {% example html %} <form> |
