<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <form class="form-horizontal" row="form"> <div class="container"> <div class="row"> <h2 align="center" style="color:blue">Registration Form</h2> </div><br/><br/> <div class="form-group"> <label for="name" class="col-sm-5 control-label">First Name</label> <div class="col-sm-4"> <div class="input-group"> <span class=input-group-addon><i class="glyphicon glyphicon-user"></i></span> <input type="text" class="form-control" id="name" placeholder="Enter last name"> </div> </div> </div> <div class="form-group"> <label for="name" class="col-sm-5 control-label">Last Name</label> <div class="col-sm-4"> <div class="input-group"> <span class=input-group-addon><i class="glyphicon glyphicon-user"></i></span> <input type="text" class="form-control" id="name" placeholder="Enter last name"> </div> </div> </div> <div class="form-group"> <label for="email" class="col-sm-5 control-label">Email Id</label> <div class="col-sm-4"> <div class="input-group"> <span class=input-group-addon><i class="glyphicon glyphicon-envelope"></i></span> <input type="email" class="form-control" id="email" placeholder="Email Id"> </div> </div> </div> <div class="form-group"> <label for="num" class="col-sm-5 control-label">Mobile No</label> <div class="col-sm-4"> <div class="input-group"> <span class=input-group-addon><i class="glyphicon glyphicon-earphone"></i></span> <input type="number" class="form-control" id="num" placeholder="Mobile no"> </div> </div> </div> <div class="form-group"> <label for="radio" class="col-sm-5 control-label">Gender</label> <div class="col-sm-4"> <div class="input-group"> <label><input type="radio" name="optradio"> Male </label> <label><input type="radio" name="optradio"> Female </label> <label><input type="radio" name="optradio"> Others </label> </div> </div> </div> <div class="form-group"> <label for="loc" class="col-sm-5 control-label">Country</label> <div class="col-sm-4"> <div class="input-group"> <span class=input-group-addon><i class="glyphicon glyphicon-globe"></i></span> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">--Select-- <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">India</a></li> <li><a href="#">England</a></li> <li><a href="#">Australia</a></li> <li><a href="#">South Africa</a></li> <li><a href="#">USA</a></li> <li><a href="#">Canada</a></li> <li><a href="#">Srilanka</a></li> <li><a href="#">Pakistan</a></li> <li><a href="#">Bangladesh</a></li> <li><a href="#">West Indies</a></li> </ul> </div> </div> </div> <div class="form-group"> <label for="name" class="col-sm-5 control-label">Username</label> <div class="col-sm-4"> <div class="input-group"> <span class=input-group-addon><i class="glyphicon glyphicon-user"></i></span> <input type="text" class="form-control" id="name" placeholder="Enter username"> </div> </div> </div> <div class="form-group"> <label for="pwd" class="col-sm-5 control-label">Password</label> <div class="col-sm-4"> <div class="input-group"> <span class=input-group-addon><i class="glyphicon glyphicon-lock"></i></span> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> </div> <div class="form-group"> <label for="pwd" class="col-sm-5 control-label">Conform Password</label> <div class="col-sm-4"> <div class="input-group"> <span class=input-group-addon><i class="glyphicon glyphicon-lock"></i></span> <input type="password" class="form-control" id="pwd" placeholder="Re-enter password"> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-5 col-sm-2"> <button type="submit" class="btn btn-primary btn-block">Register</button> </div> </div> </div> </form>

form { background-color:lightgray; }