<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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">
<form class="form-horizontal" role="form">
<h2>Register Now</h2>
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Full Name</label>
<div class="col-sm-9">
<input type="text" id="firstName" name="name" placeholder="Full Name" class="form-control" autofocus>
<span class="help-block">Last Name, First Name, eg.: Smith, Harry</span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" id="email" name="email" placeholder="Email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" id="password" name="pass" placeholder="Password" class="form-control">
</div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="date" id="birthDate" name="date" class="form-control">
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-3 control-label">Country</label>
<div class="col-sm-9">
<select id="country" name="country" class="form-control">
<option>Afghanistan</option>
<option>Bahamas</option>
<option>Cambodia</option>
<option>Denmark</option>
<option>Ecuador</option>
<option>Fiji</option>
<option>Gabon</option>
<option>Haiti</option>
</select>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<label class="control-label col-sm-3">Gender</label>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" id="femaleRadio" name="female" value="Female">Female
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" id="male" name="male" value="Male">Male
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<div class="checkbox">
<label>
<input type="checkbox">I accept <a href="#">terms</a>
</label>
</div>
</div>
<!-- /.form-group -->
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form> <!-- /form -->
</div> <!-- ./container -->
body {
/* remove codrops styles and reset the whole thing */
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
background:url(http://www.businessnewsdaily.com/images/i/000/007/874/original/free-business-plan-templates.jpg);
background-attachment:fixed;
background-size:cover;
}
*[role="form"]
{
max-width: 530px;
padding: 15px;
margin: 0 auto;
background-color: #fff;
border-radius: 0.3em;
}
*[role="form"] h2 {
margin-left: 5em;
margin-bottom: 1em;
}
