Putting effect in text box

Question

My person doubt is more theoretical, I would like to know what is the name of the effect that we give when the input rece focus the name that is inside the box it goes to the top. The feeling I have is when input gets focus the diplay goes away and the label becomes visible only it happens in a slight way giving the sense that words this world of place and size. Images as an example: Does this already exist in bootstrap? If there is a version? Why didn’t you get the 3.0 documentation

Answer 1

This "effect" was first introduced on Android following the guidelines of Material Design. This Design System was developed by Google itself and later adopted by other web frameworks such as Materialize for example as you can see here https://materializecss.com/text-inputs.html

As it is a style that has become very popular there is a unique way to be done. For the Bootstrap 3 you will not find anything done natively. But for the Bootstrap 4 there is a variation called Material Bootstrap where there is this type of component already stylized, https://mdbootstrap.com/ In the case of MDB the effect is using a input + label probably involves some Javascript tb...

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.7/css/mdb.min.css" rel="stylesheet">
JavaScript
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.7/js/mdb.min.js"></script>

<div class="md-form">
  <input type="email" id="materialLoginFormEmail" class="form-control">
  <label for="materialLoginFormEmail">E-mail</label>
</div>