<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"> <fieldset> <!-- Form Name --> <legend>Registration Form</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="fname">First Name</label> <div class="col-md-4"> <input id="fname" name="fname" placeholder="Enter your firstname" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="lname">Last Name</label> <div class="col-md-4"> <input id="lname" name="lname" placeholder="Enter your last name" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="username">Username</label> <div class="col-md-4"> <input id="username" name="username" placeholder="Enter your Username" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="email">Email Address</label> <div class="col-md-6"> <input id="email" name="email" placeholder="Enter your Email Address" class="form-control input-md" required="" type="text"> </div> </div> <!-- Password input--> <div class="form-group"> <label class="col-md-4 control-label" for="pwd">Password</label> <div class="col-md-5"> <input id="pwd" name="pwd" placeholder="Enter your password" class="form-control input-md" required="" type="password"> </div> </div> <!-- Password input--> <div class="form-group"> <label class="col-md-4 control-label" for="cpwd">Confirm Password</label> <div class="col-md-5"> <input id="cpwd" name="cpwd" placeholder="Confirm your password" class="form-control input-md" required="" type="password"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="age">Age</label> <div class="col-md-4"> <input id="age" name="age" placeholder="Enter your Age" class="form-control input-md" type="text"> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="radios">Gender</label> <div class="col-md-4"> <label class="radio-inline" for="radios-0"> <input name="radios" id="radios-0" value="male" checked="checked" type="radio"> male </label> <label class="radio-inline" for="radios-1"> <input name="radios" id="radios-1" value="female" type="radio"> female </label> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="prependedcheckbox"></label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="prependedcheckbox" name="prependedcheckbox" class="form-control" placeholder="I, accept your terms and conditions." required="" type="text"> </div> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id"></label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-primary">Submit</button> <button id="button2id" name="button2id" class="btn btn-primary">Cancel</button> </div> </div> </fieldset> </form>