The default look at the authentication forms are absolutely not good looking. In this document we will give you the code needed to make the forms look good by using bootstrap forms.

Login form

The default form presented for a user when logging into a DG3 application can be found in the folder authentication and have the name login. Open this form and enter html mode. Add this code.

[% if form.errors %]
<p>Your username and password didn't match. Please try again.</p>
[% endif %]

<form class="form-horizontal" role="form" method="post" action=".">[% csrf_token %]
	<div class="form-group">
    		<label for="id_username" class="col-sm-2 control-label">Username:</label>
    		 <div class="col-sm-10">
			<input id="id_username" type="text" name="username" class="form-control"  maxlength="254">
		</div>
	</div>
	<div class="form-group">
   		<label for="id_password"  class="col-sm-2 control-label">Password:</label>
    		 <div class="col-sm-10">
    			<input id="id_password" type="password" name="password"  class="form-control">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<input class="btn btn-success" type="submit" value="login" />
			<input type="hidden" name="next" value="[{ next }]" />
		</div>
	</div>
</form><br>

What we have done is to remove the Django form code that comes out of the box and added the same code using bootstrap forms. What we need to take care of to get the code to work is to keep the csrf_token on the page and all extra hidden forms used by the login process.