Description :
Hi Friends , Today in this article we are going to show you how to create a responsive registration form with bootstrap.
What is Bootstrap ?
Bootstrap is an open-source framework developed by Twitter for front end developers to make responsive and beautiful websites in less time . It is a combination of HTML , CSS and JavaScript and it is support to both HTML5 and CSS3 .
Step1 :
Add below code in HTML head
[css]
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/datepicker.css">
<link rel="stylesheet" href="css/registration-form-with-bootstarp.css">
[/css]
Step2 :
Add below code in HTML body
[html]
<div class="container">
<div class="row">
<div class="page-header">
<h1>Registration Form With Bootstrap</h1>
</div>
<form class="form-horizontal" role="form" method="post" action="#">
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-6">
<input type="text" name="firstName" class="form-control" id="firstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-6">
<input type="text" name="lastName" class="form-control" id="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">Gender:</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="gender" id="gender1" value="male">Male
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2" value="female">Female
</label>
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">DOB:</label>
<div class="col-sm-6">
<input type="text" name="dob" class="form-control datepicker" id="dob" placeholder=" Date of Birth">
</div>
</div>
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-6">
<input type="email" name="userName" class="form-control" id="userName" placeholder="User Name">
</div>
</div>
<div class="form-group">
<label for="passwd" class="col-sm-2 control-label">Password:</label>
<div class="col-sm-6">
<input type="password" name="passwd" class="form-control" id="passwd" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="register">Register</button>
</div>
</div>
</form>
</div><!-- end for class "row" -->
</div><!-- end for class "container" -->
[/html]