<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <div class="container"> <div class="row"> <div class="form-group col-md-12"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/570x75"></a> </div> </div> <div class="row"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user" title="Enter User Name"></i></span> <input type="text" class="form-control" placeholder="User Name"> </div> </div> <div class="col-md-4 reduceleftpadding"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope" title="Enter Email Address"></i></span> <input type="text" class="form-control" placeholder="Email Address"> </div> </div> <div class="col-md-4 reduceleftpadding"> <div class="input-group date" data-provide="datepicker"> <div class="input-group-addon"><i class="fa fa-calendar"></i></div> <input class="form-control" id="wodate1" name="date" placeholder="Date of Birth" value="" bootstrap-datepicker="" data-date-end-date="0d"> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" style="margin-top:4px;"> </span> <input type="text" class="form-control" placeholder="Remember Me"> </div> </div> <div class="col-md-4 reduceleftpadding"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> </div> <div class="col-md-4 reduceleftpadding"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> </div> </div> <div class="row"> <div class="form-group col-md-12"> <button class="btn btn-block btn-lg btn-primary">Continue</button> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans); body { font-family: 'Open Sans'; background-color: #999; margin-top: 30px; } input, .input-group-addon, button { border-radius: 0 !important; } @media screen and (min-width: 992px) { .reduceleftpadding { padding-left: 0px; } } .container { padding-top: 25px; max-width: 600px; position: relative; background-color: #fff; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .input-group { margin-bottom: 10px; } .input-group-addon { max-width: 35px; text-align: center; background-color: white; color: lightgray; } .input-group input { border-left: 0; padding-left: 0px; } .input { border-radius: 0; } .btn { text-transform: uppercase; letter-spacing: 0.16em; padding: 14px; } img { max-width: 100%; height: auto; }

$(function () { $('i[title]').tooltip(); });