<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container my-5 py-5 text-center"> <h2>Floating Label</h2> <hr/><br/><br/> <div class="row align-items-center h-100"> <div class="col-md-5 mt-5"> <h5>Label <span style="color:#1AB9A7">Inside</span> of Input filed</h5> <div class="position-relative mt-4"> <input type="text" required /> <span class="floating-label">First name</span> <i class="fa fa-user-o input-icon"></i> </div> <div class="position-relative mt-4"> <input type="text" required /> <span class="floating-label">Last name</span> <i class="fa fa-user-o input-icon"></i> </div> <div class="position-relative mt-4"> <input type="text" required /> <span class="floating-label">Email ID</span> <i class="fa fa-envelope-o input-icon"></i> </div> <div class="position-relative mt-4"> <input type="text" required /> <span class="floating-label">Enter City</span> <i class="fa fa-globe input-icon"></i> </div> </div> <div class="border border-top-0 col-md-2 h-100 d-none d-sm-block" style="transform: rotate(90deg);"></div> <div class="col-md-5 mt-5"> <h5>Label <span style="color:#1AB9A7">Outside</span> of Input filed</h5> <div class="position-relative mt-4"> <input type="text" class="outside" required /> <span class="floating-label-outside">First name</span> <i class="fa fa-user-o input-icon-outside"></i> </div> <div class="position-relative mt-4"> <input type="text" class="outside" required /> <span class="floating-label-outside">Last name</span> <i class="fa fa-user-o input-icon"></i> </div> <div class="position-relative mt-4"> <input type="text" class="outside" required /> <span class="floating-label-outside">Email ID</span> <i class="fa fa-envelope-o input-icon"></i> </div> <div class="position-relative mt-4"> <input type="text" class="outside" required /> <span class="floating-label-outside">Enter City</span> <i class="fa fa-globe input-icon"></i> </div> </div> </div> </div>

h2{font-weight:100!important;text-transform:uppercase;letter-spacing:3px;color:#727272!important} h5{font-size:14px!important;font-weight:400!important;text-transform:uppercase;letter-spacing:3px;color:#626262!important;text-align:left} /********* Label Inside of Input filed *********/ input,input[type=text]{color:#555;width:100%;font-size:15px;height:52px;line-height:normal;border:#ddd solid 1px;border-radius:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin-bottom:-1px;padding:10px 10px 0 40px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1} input:focus,select:focus{outline:0!important;color:#555!important;border-color:#9e9e9e;z-index:2} input:focus~.floating-label input:not(:focus):valid~.floating-label{top:7px;left:40px;font-size:10px;opacity:1;font-weight:400} input:focus~.floating-label,input:valid~.floating-label{top:5px;opacity:1;font-size:10px;color:#727272} input:focus~.floating-label,input:not(:focus):valid~.floating-label{left:40px} input:focus~.input-icon{color:#383838} .floating-label{position:absolute;pointer-events:none;left:40px;top:16px;transition:.2s ease all;color:#777;font-weight:400;font-size:14px;letter-spacing:.5px;z-index:3;text-transform:uppercase} .input-icon{position:absolute;top:18px;left:15px;z-index:3;color:#727272} /********* Label Outside of Input filed *********/ input.outside,input[type=text].outside{color:#555;width:100%;font-size:15px;height:52px;line-height:normal;border:#ddd solid 1px;border-radius:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin-bottom:-1px;padding:10px 10px 10px 40px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1} input:focus,select:focus{outline:0!important;color:#555!important;border-color:#9e9e9e;z-index:2} input:focus~.floating-label-outside input:not(:focus):valid~.floating-label-outside{top:12px;left:40px;font-size:10px;opacity:1;font-weight:400} input:focus~.floating-label-outside,input:valid~.floating-label-outside{top:-7px;opacity:1;font-size:10px;color:#727272;background:#fff;padding:0px 5px;} input:focus~.floating-label-outside,input:not(:focus):valid~.floating-label-outside{left:35px} .floating-label-outside{position:absolute;pointer-events:none;left:40px;top:16px;transition:.2s ease all;color:#777;font-weight:400;font-size:14px;letter-spacing:.5px;z-index:3;text-transform:uppercase} .input-icon-outside{position:absolute;top:18px;left:15px;z-index:3;color:#727272;}