<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <form> <fieldset class="account-info"> <legend>Log in</legend> <label> Username <input type="text" name="username"> </label> <label> Password <input type="password" name="password"> </label> </fieldset> <fieldset class="account-action"> <input class="btn" type="submit" name="submit" value="Login"> <label> <input type="checkbox" name="remember"> Stay signed in </label> </fieldset> </form>

*, *:before, *:after { box-sizing: border-box; } form { border: 1px solid #c6c7cc; border-radius: 5px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden; width: 240px; } fieldset { border: 0; margin: 0; padding: 0; } input { border-radius: 5px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; } .account-info { padding: 20px 20px 0 20px; } .account-info label { color: #395870; display: block; font-weight: bold; margin-bottom: 20px; } .account-info input { background: #fff; border: 1px solid #c6c7cc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); color: #636466; padding: 6px; margin-top: 6px; width: 100%; } .account-action { background: #f0f0f2; border-top: 1px solid #c6c7cc; padding: 20px; } .account-action .btn { background: linear-gradient(#49708f, #293f50); border: 0; color: #fff; cursor: pointer; font-weight: bold; float: left; padding: 8px 16px; } .account-action label { color: #7c7c80; font-size: 12px; float: left; margin: 10px 0 0 20px; } legend { font-size: 20px; background-color: green; color:white; width: 100%; padding:5px; text-align:center; }