<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 ----------> <div class="container"> <div class="row"> <div class="form-label-group col-sm-6"> <input type="text" class="form-control" placeholder="First name"> <label>First Name</label> </div> <div class="form-label-group col-sm-6"> <input type="text" class="form-control" placeholder="Last Name"> <label for="home-lname">Last Name</label> </div> </div> </div>

.container { max-width: 500px; margin: 2rem auto; } .form-label-group { position: relative; margin-bottom: 1rem; } .form-label-group > input, .form-label-group > label { padding: 0.4rem; } .form-label-group > label { position: absolute; top: 0; left: 0; display: block; width: 100%; font-size: 1rem; line-height: 1.5; pointer-events: none; cursor: text; /* Match the input under the label */ border: 1px solid transparent; border-radius: 0.25rem; transition: all 0.1s ease-in-out; padding-left: 1.4rem; } .form-label-group input:not(:placeholder-shown) { padding-top: 1rem; padding-bottom: 0.25rem; } .form-label-group input:not(:placeholder-shown) ~ label { padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 10px; } .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; } /* Fallback for Edge -------------------------------------------------- */ @supports (-ms-ime-align: auto) { .form-label-group > label { display: none; } } /* Fallback for IE -------------------------------------------------- */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .form-label-group > label { display: none; } }