Bootstrap 3 Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/examples/signin/signin.css">
<div class="container">
<form>
<div style="text-align:center;margin-bottom:10px;font-size:18px;">
<img src="http://people.mozilla.org/~faaborg/files/shiretoko/firefoxIcon/firefox-512-noshadow.png" width="24"> <strong>Firefox</strong> Accounts</div>
<fieldset class="panel">
<h3>Sign in to Marketplace</h3>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Email address" required autofocus>
</div>
<div class="form-group">
<div class="input-group">
<input class="form-control input-lg" placeholder="Password" required="" type="password">
<label class="input-group-addon">
<input type="checkbox" style="display:none;"> Show</label>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p><a href="#">Forgot Password</a> • <a href="#">Create Account</a>
</p>
</fieldset>
</form>
</div>
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #fff;
}
.container {
max-width: 360px;
}
.panel {
padding: 25px;
margin: 0 auto;
border: 1px solid #eee;
}
h2, h3, h4, h5 {
text-align: center;
margin-top: 0;
}
p {
text-align: center;
margin: 1em 0;
text-transform: lowercase;
}
h4 span {
font-weight: normal;
}
input[type="text"] {
margin-bottom: -16px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
input[type="password"], .input-group-addon {
margin-bottom: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}