<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 ----------> <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script> <!-- put the jquery in your header or footer --> <div class="background"> <div class="form-group"> <label for="your-name">Name:</label> <input type="text" name="your-name" id="your-name" value="" size="40" class="form-control"> </div> </div>

.background { width: 100%; float: left; background: #b30838; height: 415px; padding-top: 20px; } label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; color: #fff; float: left; padding-top:12px; padding-right:10px; padding-left:10px; vertical-align: top; } .form-group { border: 1px solid #fff; margin-left: 25px; border-radius: 1%; } .form-control { display: block; margin: 1%; min-height:30px; border:1px solid #ffffff; }

$(document).ready(function() { $("#your-name").attr("placeholder", "Your Name"); });