Here is a short tutorial on building a simple user authentication page using Twitter Bootstrap. It is assumed that you have the latest Twitter Bootstrap downloaded and set in your machine prior to this tutorial. An user authentication page that is similar to the screenshot below will be created. There are two portions that needs to be coded, the custom CSS and the user authentication HTML page.
CSS File
A Custom CSS file is required to over-ride or add additional styling to your existing Twitter Bootstrap. In the CSS file below, the body background color was over-ride and two new elements was added to the Custom CSS file. The two new elements are the classes: login and center. The login class is used to lower the login panel from the top navigation bar to avoid the overlapping with the navigation bar.The center class is used to position an element in the center of the page. The login panel will be centered using the .center class.
body{background-color: #F7F7F6;}
.login{padding-top: 65px;}
.center{float: none; margin-left: auto; margin-right: auto;}
HTML File
Here is the HTML file that contains the necessary codes for the user authentication page. The HTML page is divided into few portions: Header Navigation Bar, Log-in Panel, Footer, Modal Box. The Navigation Bar contains details such as the application name and also link to reset password and contact us form. Meanwhile, the Log-in Panel holds the HTML input elements that are necessary for the user authentication page. The Footer contains the copyright notice and the Modal Box for the reset password and the contact us. It is included at the end of the page before the inclusion of the JavaScript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Application Name - Admin Login</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- StyleSheet -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">Application Name</a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li><a href="#forgot" data-toggle="modal"><i class="icon-user icon-white"></i> Forgot Password</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact" data-toggle="modal"><i class="icon-envelope icon-white"></i> Contact Us</a></li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navigation Ends -->
<!-- Main Container -->
<section>
<div class="container login">
<div class="row ">
<div class="center span4 well">
<legend>Please Sign In</legend>
<div class="alert alert-error">
<a class="close" data-dismiss="alert" href="#">×</a>Incorrect Username or Password!
</div>
<form method="POST" action="" accept-charset="UTF-8">
<input type="text" id="username" class="span4" name="username" placeholder="Username" />
<input type="password" id="password" class="span4" name="password" placeholder="Password" />
<label class="checkbox">
<input type="checkbox" name="remember" value="1" /> Remember Me
</label>
<button type="submit" name="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
</div>
</div>
</div>
<p class="text-center muted ">© Copyright 2013 - Application Name</p>
</section>
<!-- Main Container Ends -->
<!-- Forgot Password Model Box -->
<div id="forgot" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Forgot Password</h3>
</div>
<div class="modal-body">
<p>Enter your username to reset the password</p>
<form>
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Name" />
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Submit</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<!-- Contact Us Model Box -->
<div id="contact" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Contact Us</h3>
</div>
<div class="modal-body">
<form>
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Name" />
</div>
<div class="controls controls-row">
<input id="email" name="email" type="email" class="span3" placeholder="Email address" />
</div>
<div class="controls">
<textarea id="message" name="message" class="span5" placeholder="Your Message" rows="5"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Submit</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>