¿Cómo se llama este efecto o propiedad? ¿Es de Bootstrap?:
Como ven, el placeHolder se alinea con el margen del TextBox al hacer click dentro de el para escribir.
Son conocidos como 'Floating labels/placeholders'. Y están basados en Material Design. Es un tipo de diseño con ciertos estándares creado por Google.
Hay varias maneras de poder realizarlo y eso varia de desarrollador a desarrollador, te dejo una manera. Solo faltaría meterle tus propios estilos.
body{
padding:50px;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="tel"][required]:focus + label[placeholder]:before,
input[type="password"][required]:focus + label[placeholder]:before,
input[type="email"][required]:focus + label[placeholder]:before,
form select[required]:focus + label[placeholder]:before
{
color: #3399CC;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before,
input[type="tel"][required]:focus + label[placeholder]:before,
input[type="tel"][required]:valid + label[placeholder]:before,
input[type="email"][required]:focus + label[placeholder]:before,
input[type="email"][required]:valid + label[placeholder]:before,
input[type="password"][required]:focus + label[placeholder]:before,
input[type="password"][required]:valid + label[placeholder]:before,
form select[required]:focus + label[placeholder]:before,
form select[required]:valid + label[placeholder]:before
{
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transform: translate(0, -0.8em) scale(0.9, 0.9);
transform: translate(0, -0.8em) scale(0.9, 0.9);
}
input[type="text"][required]:invalid + label[placeholder][alt]:before,
input[type="tel"][required]:invalid + label[placeholder][alt]:before,
input[type="password"][required]:invalid + label[placeholder][alt]:before,
input[type="email"][required]:invalid + label[placeholder][alt]:before,
form select[required]:invalid + label[placeholder][alt]:before
{
content: attr(alt);
}
input[type="text"][required] + label[placeholder],
input[type="tel"][required] + label[placeholder],
input[type="password"][required] + label[placeholder],
input[type="email"][required] + label[placeholder],
form select[required] + label[placeholder]
{
display: block;
pointer-events: none;
line-height: 1.25em;
margin-top: calc(-1.5em - 2px);
margin-bottom: calc((3em - 1em) + 2px);
font-size: 0.85em;
font-weight: normal;
}
input[type="text"][required] + label[placeholder]:before,
input[type="password"][required] + label[placeholder]:before,
input[type="tel"][required] + label[placeholder]:before,
input[type="email"][required] + label[placeholder]:before,
form select[required] + label[placeholder]:before
{
content: attr(placeholder);
display: inline-block;
margin: 2px;
padding: 0 6px;
color: #9C9C9C;
white-space: nowrap;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
background-image: -webkit-linear-gradient(top, #fff, #fff);
background-image: linear-gradient(to bottom, #fff, #fff);
background-size: 100% 5px;
background-repeat: no-repeat;
background-position: center;
}
<div class="form-group">
<input type="password" class="form-control" required>
<label placeholder="Ingresar NIP" for=""></label>
</div>