diff options
| author | Mark Otto <[email protected]> | 2017-11-29 03:05:01 -0800 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2017-11-29 13:05:01 +0200 |
| commit | a649c7f2089e51190e8c0ba6454fb887d6400535 (patch) | |
| tree | bb2cc8ab701f347a88fbccfc0116655df3c0dd4c /docs | |
| parent | c2c0eebd4328524e8202f9e87dabbbf8755c31e7 (diff) | |
| download | bootstrap-a649c7f2089e51190e8c0ba6454fb887d6400535.tar.xz bootstrap-a649c7f2089e51190e8c0ba6454fb887d6400535.zip | |
Override padding on radio input label (#24899)
We could tell folks to nix the class, we could tell them to override it, or we could add another modifier of some kind to address this. None of them seem particularly useful, but the padding override feels the most approachable and clearly documentable. Added this here to close #24844.
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/components/forms.md | 4 |
1 files changed, 3 insertions, 1 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index eba9fc75f..980596e8c 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -364,6 +364,8 @@ Create horizontal forms with the grid by adding the `.row` class to form groups 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. +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. + {% example html %} <form> <div class="form-group row"> @@ -380,7 +382,7 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall </div> <fieldset class="form-group"> <div class="row"> - <legend class="col-form-legend col-sm-2">Radios</legend> + <legend class="col-form-legend col-sm-2 pt-0">Radios</legend> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> |