Design a textbox with text

Question

How to design this text box

the login label type in border of textbox , how to do this using bootstrap and css please help me!!

Answer 1

Try this answer. This may be helpful.

Live Jsfiddle

.sample-form {
  margin: 15px 0;
}

.sample-form .form-group {
  position: relative;
}

.sample-form .form-group label {
  position: absolute;
  top: -15px;
  left: 15px;
  background-color: #ffffff;
  margin: 0;
  padding: 2px 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
 <form class="sample-form">
   <div class="form-group">
    <label for="usr">Name:</label>
    <input type="text" class="form-control" id="usr">
  </div>
 </form>
</div>