Bootstrap 4.1 floating labels - css

Question

I've found on Google a doc example for Bootstrap 4.1 in which they feature floating labels: getbootstrap.com/docs/4.1/examples/floating-labels/
In that page, however, it is not explained how that can be achieved, and I can't find anything in the docs for v. 4.1. Floating labels are not even listed as a new feature in the ship list.
Does anyone know if floating labels are supported?

Answer 1

It says on the Bootstrap examples page that floating-labels are...
"Experiments - Examples that focus on future-friendly features or
techniques."
Like many of the other examples, there's an additional CSS file used in the example...
Using the floating-labels.css they work as expected in the supported browsers...
https://www.codeply.com/go/X9VbHqzD4B

Answer 2

Best way for me is using transform translate. It is smoother. I have added extra classes to prevent overwriting bootstraps original classes.
body{padding:75px}
.form-group.floating>label {
bottom: 34px;
left: 8px;
position: relative;
background-color: white;
padding: 0px 5px 0px 5px;
font-size: 1.1em;
transition: 0.1s;
pointer-events: none;
font-weight: 500 !important;
transform-origin: bottom left;
}
.form-control.floating:focus~label{
transform: translate(1px,-85%) scale(0.80);
opacity: .8;
color: #005ebf;
}
.form-control.floating:valid~label{
transform-origin: bottom left;
transform: translate(1px,-85%) scale(0.80);
opacity: .8;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group floating">
<input type="text" class="form-control floating" id="usr" required value="">
<label for="usr">Username</label>
</div>

Answer 3

Styles they ware using in that mentioned example site
:root {
--input-padding-x: .75rem;
--input-padding-y: .75rem;
}
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 420px;
padding: 15px;
margin: 0 auto;
}
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
padding: var(--input-padding-y) var(--input-padding-x);
}
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
}

Answer 4

If you really want floating label, see this awesome Bootstrap 4 theme : http://djibe.github.io/material/docs/4.4/material/text-fields/

Answer 5

SCSS version below including support for textarea and excluding styles from IE11, which doesn't support :placeholder-shown.
:root {
--input-padding-x: .75rem;
--input-padding-y: .75rem;
}
.floating-label {
$placeholderColour: $middleGrey;
position: relative;
input, textarea, label {
padding: var(--input-padding-y) var(--input-padding-x);
}
label {
position: absolute;
top: 0;
left: 0;
display: block;
margin-bottom: 0;
line-height: 1.5;
color: $placeholderColour;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
&:hover {
cursor: text;
}
}
input::-webkit-input-placeholder {
color: transparent;
}
input:-ms-input-placeholder {
color: transparent;
}
input::-ms-input-placeholder {
color: transparent;
}
input::-moz-placeholder {
color: transparent;
}
input::placeholder {
color: transparent;
}
textarea::-webkit-input-placeholder {
color: transparent;
}
textarea:-moz-placeholder {
color: transparent;
}
textarea::-moz-placeholder {
color: transparent;
}
textarea:-ms-input-placeholder {
color: transparent;
}
textarea::placeholder {
color: transparent;
}
input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
input:not(:placeholder-shown) ~ label,
textarea:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
&:hover {
cursor: default;
}
}
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
label {
display: none;
}
textarea:-ms-input-placeholder, input:-ms-input-placeholder {
color: $placeholderColour;
}
textarea::-ms-input-placeholder, input::-ms-input-placeholder {
color: $placeholderColour;
}
}
}

Answer 6

I've created an input floating label for Bootstrap 4 & 5 (not the same look that Bootstrap provides): https://github.com/tkrotoff/bootstrap-floating-label
Here is the online demo: https://codesandbox.io/s/github/tkrotoff/bootstrap-floating-label/tree/codesandbox.io