position: relative;
> .form-control,
+ > .form-control-plaintext,
> .form-select {
height: $form-floating-height;
line-height: $form-floating-line-height;
@include transition($form-floating-transition);
}
- // stylelint-disable no-duplicate-selectors
- > .form-control {
+ > .form-control,
+ > .form-control-plaintext {
padding: $form-floating-padding-y $form-floating-padding-x;
&::placeholder {
> .form-control:focus,
> .form-control:not(:placeholder-shown),
+ > .form-control-plaintext,
> .form-select {
~ label {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
}
}
- // stylelint-enable no-duplicate-selectors
+
+ > .form-control-plaintext {
+ ~ label {
+ border-width: $input-border-width 0; // Required to properly position label text - as explained above
+ }
+ }
}
</div>
{{< /example >}}
+## Readonly plaintext
+
+Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `<input>` to a plaintext value without affecting the page layout.
+
+{{< example >}}
+<div class="form-floating mb-3">
+ <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
+ <label for="floatingEmptyPlaintextInput">Empty input</label>
+</div>
+<div class="form-floating mb-3">
+ <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
+ <label for="floatingPlaintextInput">Input with value</label>
+</div>
+{{< /example >}}
+
## Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.