<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 ----------> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4 outlined"> <h1 class="text-center login-title">Log In</h1> <div class="account-wall"> <form class='form-signin' action="{% url 'login' %}" method='POST'> <!--{% csrf_token %}--> <div class="form-group"> <input type='text' name='username' class='underlined' placeholder='Username' required autofocus> </div> <div class="form-group"> <input type='password' name='password' class='underlined' placeholder='Password' required> </div> <div class="form-group"> <button class='btn btn-lg btn-primary btn-block' type='submit'>Sign in</button> </div> <span class="clearfix"></span> </form> </div> <div class="text-center"> Don't have an account? <a href="{% url 'signup' %}" class="new-account">Register here!</a> </div> </div> </div> </div>

.fieldcontainer, .relcontainer { border-style: solid; padding: 10px; } ul.fieldItemList { padding-left:20px; margin-bottom:0px; } div.fieldItem:hover { color:#d9534f; } div.fieldItem input:hover { color:#333; } input:not([type=checkbox]):not([type=radio]) { border-top: 0 solid; border-right: 0 solid; border-bottom: 1px solid; border-left: 0 solid; border-color: #999; padding-left: 5px; padding-right: 5px; width:94%; } textarea { background-color: transparent; border-top: 0 solid; border-right: 0 solid; border-bottom: 0 solid; border-left: 2px solid; border-color: #999; padding-left: 6px; margin-left: 2px; width: 100%; resize: vertical; } button, submit { border:none; } textarea:focus, input:focus, select.arcPointSelect:focus { outline: none; border-color: #00d8e8; } hr.lowpadding { padding: 0px; margin: 2px; margin-bottom: 10px; border-color: #999; } hr.lowpadding::after { content: ""; clear: both; display: table; } .fieldTitle { font-size: 16px; font-weight: bold; } button.redX { color: grey; background-color:transparent; padding-right: 0; padding-top: 0; } button.redX:hover { color:#d9534f; } button.addFieldItem { background-color:transparent; padding-right: 0; padding-left: 1px; color: grey; } button.addFieldItem:hover { color: #5cb85c; } button.addFieldItem span.glyphicon { margin-right: 11px; } /*****************************/ .checkbox { margin:0px; width:inherit; } select.arcPointSelect { background-color: transparent; border: 0 solid; padding-left: 0px; padding-right: 5px; width: 100%; } .relationshipFirstRow input.underlined, .relationshipFirstRow select.underlined { border-bottom: 1px solid; border-color: #999; height:20px; padding-bottom: 3px; padding-top:0px; } .relationshipFirstRow input.underlined:focus, .relationshipFirstRow select.underlined:focus { border-color:#00d8e8; } input.underlined:focus, select.underlined:focus { border-color:#00d8e8; } .relationshipFirstRow { margin-bottom: 10px; } select.arcPointSelect option:enabled { color: #333; } /*****************************/ .half { width: 49%; } .text-center { text-align: center; } .form-signin input:not([type=checkbox]):not([type=radio]) { width: 100%; } .outlined { padding: 5px; border-style: solid; border-width: 1px; border-radius: 5px; }