diff options
| author | Patrick H. Lauke <[email protected]> | 2017-04-28 00:35:55 +0100 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-06-14 19:51:50 -0700 |
| commit | ff5c75510d4c7445770048a117b4ac7764ca2031 (patch) | |
| tree | a99990f50eec256d9329ca5d94189191e91bf96d | |
| parent | 22bd955434ac3cb6d4a5a7f2d21129a9a7f4b343 (diff) | |
| download | bootstrap-ff5c75510d4c7445770048a117b4ac7764ca2031.tar.xz bootstrap-ff5c75510d4c7445770048a117b4ac7764ca2031.zip | |
Rename .form-control-static to .form-control-readonly-plain
| -rw-r--r-- | docs/4.0/components/forms.md | 8 | ||||
| -rw-r--r-- | scss/_forms.scss | 8 |
2 files changed, 8 insertions, 8 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 2bc4a91cb..0a5756c4d 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -115,16 +115,16 @@ Add the `readonly` boolean attribute on an input to prevent modification of the <input class="form-control" type="text" placeholder="Readonly input here…" readonly> {% endexample %} -### Static +### Readonly plain text -If you want to have read-only fields in your form styled as plain text, use the `.form-control-static` class to remove the default form field styling and preserve the correct margin and padding. +If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. {% example html %} <form> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> - <input type="text" readonly class="form-control-static" id="staticEmail" value="[email protected]"> + <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]"> </div> </div> <div class="form-group row"> @@ -140,7 +140,7 @@ If you want to have read-only fields in your form styled as plain text, use the <form class="form-inline"> <div class="form-group"> <label for="staticEmail2" class="sr-only">Email</label> - <input type="text" readonly class="form-control-static" id="staticEmail2" value="[email protected]"> + <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]"> </div> <div class="form-group mx-sm-3"> <label for="inputPassword2" class="sr-only">Password</label> diff --git a/scss/_forms.scss b/scss/_forms.scss index 89766563c..ecf0a3df1 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -122,12 +122,12 @@ select.form-control { } -// Static form control text +// Readonly controls as plain text // -// Apply class to an element to make any string of text align with labels in a -// horizontal form layout. +// Apply class to a readonly input to make it appear like regular plain +// text (without any border, background color, focus indicator) -.form-control-static { +.form-control-plaintext { padding-top: $input-btn-padding-y; padding-bottom: $input-btn-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins |