Login/Registration

Tabbed Login and Registration using Twitter Bootstrap

by Ali Khaled

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js&quot;"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<body>
    <div class="container-narrow">
        <div class="masthead">
            <ul class="nav nav-pills pull-right">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
             <h3 class="muted">Project name</h3>

        </div>
        <hr>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab"><i class="icon-user"></i> Client Login</a>
            </li>
            <li><a href="#profile" data-toggle="tab"><i class="icon-pencil"></i> Client Registration</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane active in" id="home">
                <div class="row">
                    <div class="span6 offset1 well">
                        <legend>
                            <h5>Please Sign In</h5>
                        </legend>
                        <form method="POST" action="" accept-charset="UTF-8">
                            <input type="text" id="username" class="span6" name="username" placeholder="User ID">
                            <input type="password" id="password" class="span6" name="password" placeholder="Password">
                            <hr>
                            <button type="submit" name="submit" class="btn btn-info btn-block">Sign in</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="profile">
                <div class="row">
                    <div...

CSS

body {
     padding-top: 20px;
     padding-bottom: 40px;
 }
 /* Custom container */
 .container-narrow {
     margin: 0 auto;
     max-width: 700px;
 }
 .container-narrow > hr {
     margin: 30px 0;
 }
 /* Main marketing message and sign up button */
 .jumbotron {
     margin: 60px 0;
     text-align: center;
 }
 .jumbotron h1 {
     font-size: 72px;
     line-height: 1;
 }
 .jumbotron .btn {
     font-size: 21px;
     padding: 14px 24px;
 }
 .marketing {
     margin: 60px 0;
 }
 .marketing p + h4 {
     margin-top: 28px;
 }