i have used bootstrap to make a calendar and to select a ranged date from and to, but the problem is for some strange reason, the calendar is not coming.
I have write my html and query code. But i think the script is wrong!
Html ---
<div class="row">
<!-- Hover Row Table -->
<div class="col-lg-12">
<div class="widget-container fluid-height clearfix">
<div class="widget-content padded clearfix">
<table class="table table-hover">
<td>
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
script --
<script>
jQuery(function () {
jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
jQuery('#endDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
jQuery("#startDate").on("dp.change", function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
});
</script>
Output ---
it should look like this ---
it shows the error ---
TypeError: jQuery(...).datetimepicker is not a function
jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
How can i fix this error, anyone knows !
Thanks a lot in advanced.
I found this jsfiddle example.
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
You can also read more about this on github.
Related
I am trying to develop a page with a total of 6 input fields - 2 constant and 4 dynamic. A single form needs to send data with dynamic marks rows that will be added by users choice.
View :
<body ng-controller="homeController">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3>Students Form</h3>
<form name="StudentForm">
<div class="row">
<div class="col-sm-6">
<input type="text" ng-model="formData.regno" placeholder="Reg Number">
</div>
<div class="col-sm-6">
<input type="text" ng-model="formData.name" placeholder="Student Name">
</div>
</div>
<div ng-show="showMarks" ng-repeat="formData in studentMarks">
<div class="row">
<br>
<div class="col-sm-3"><input type="text" ng-model="formData.subone"
placeholder="Subject 1" style="width:70%"></div>
<div class="col-sm-3"><input type="text" ng-model="formData.subtwo"
placeholder="Subject 2" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subthree"
placeholder="Subject 3" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subfour"
placeholder="Subject 4" style="width:70%"></div>
<div class="col-sm-2"><button ng-click="delMarks()"> Delete</button></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2">
<button ng-model="addBtnMarks" ng-click="addMarks(addBtnMarks)">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
</div>
<div class="col-sm-2">
<button ng-click="editEnquiry()"> Edit</button>
</div>
<div class="col-sm-2">
<button type="submit" ng-click="saveFullForm()"> Save</button>
</div>
<div class="col-sm-2">
<button onclick="window.print()"> Print</button>
</div>
<div class="col-sm-2"></div>
</div>
</form>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<br>
<br>
</div>
</body>
Controller :
var std = angular.module("studentsApp",[]);
std.controller("homeController", function($scope){
$scope.showMarks=false;
$scope.studentMarks=[];
$scope.addMarks = function (){
$scope.showMarks=true;
var rowConut = $scope.studentMarks.length +1;
$scope.studentMarks.push({
subone:0,
subtwo:0,
subthree:0,
subfour:0,
});
console.log(rowConut);
console.log($scope.studentMarks);
};
$scope.delMarks = function (){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.pop();
console.log(rowConut);
console.log($scope.studentMarks);
};
$scope.saveFullForm = function(){
//
console.log($scope.formData);
console.log($scope.marks);
console.log($scope.studentMarks);
};
});
Problem is:
When I click -save button form data for dynamic rows does not get shown up
in the console. Also, when adding more than one row, -delete button does
not deletes individual rows. The last row gets deleted by default. What might be the
problem in the code.
When using array.pop, it will remove the last element in the array. The solution is to pass the element index from the view through ng-click and splice the array based on the index , thus the element will be remove out from the array
View
<div class="col-sm-2"><button ng-click="delMarks($index)"> Delete</button></div>
Controller
$scope.delMarks = function (index){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.splice(index,1);
console.log(rowConut);
console.log($scope.studentMarks);
};
Update
var std = angular.module("studentsApp",[]);
std.controller("homeController", function($scope){
$scope.showMarks=false;
$scope.studentMarks=[];
$scope.addMarks = function (){
$scope.showMarks=true;
var rowConut = $scope.studentMarks.length +1;
$scope.studentMarks.push({
subone:$scope.formData.regno,
subtwo:0,
subthree:0,
subfour:0,
});
//console.log(rowConut);
//console.log($scope.studentMarks);
};
$scope.delMarks = function (index){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.splice(index,1);
//$scope.studentMarks.pop();
//console.log(rowConut);
//console.log($scope.studentMarks);
};
$scope.saveFullForm = function(){
//
console.log($scope.formData);
console.log($scope.marks);
console.log($scope.studentMarks);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="studentsApp">
<body ng-controller="homeController">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3>Students Form</h3>
<form name="StudentForm">
<div class="row">
<div class="col-sm-6">
<input type="text" ng-model="formData.regno" placeholder="Reg Number">
</div>
<div class="col-sm-6">
<input type="text" ng-model="formData.name" placeholder="Student Name">
</div>
</div>
<div ng-show="showMarks" ng-repeat="formData in studentMarks">
<div class="row">
<br>
<div class="col-sm-3"><input type="text" ng-model="formData.subone"
placeholder="Subject 1" style="width:70%"></div>
<div class="col-sm-3"><input type="text" ng-model="formData.subtwo"
placeholder="Subject 2" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subthree"
placeholder="Subject 3" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subfour"
placeholder="Subject 4" style="width:70%"></div>
<div class="col-sm-2"><button ng-click="delMarks($index)"> Delete</button></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2">
<button ng-model="addBtnMarks" ng-click="addMarks()">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
</div>
<div class="col-sm-2">
<button ng-click="editEnquiry()"> Edit</button>
</div>
<div class="col-sm-2">
<button type="submit" ng-click="saveFullForm()"> Save</button>
</div>
<div class="col-sm-2">
<button onclick="window.print()"> Print</button>
</div>
<div class="col-sm-2"></div>
</div>
</form>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<br>
<br>
</div>
</body>
</html>
I'm creating a form on my event management system website to allow you to create events. The page is using Bootstrap on the Admin-LTE template.
I have split part of the form into two columns. On the right column is a section to enter the number of spaces on the event and on the left is a section to enter the start and end date and time of the event. I wrote the HTML code for the right side first and am now trying to do the left side, however for some reason the space between the bootstrap rows on the page has changed despite the only different between each side is changing the check box to a number input (I will eventually add a datepicker drop down to this, however the same issue occurred when I tried it previously) and a few others changes in the naming of inputs.
Any suggestions to fix it would be very appreciated!
<div class="box box-primary">
<div class="box-body">
<div class="input-group">
<span class="input-group-addon">Event Title</span>
<input type="text" class="form-control" placeholder="Event Title" id="txtEventTitle">
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Start Date</span>
<input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Start Time</span>
<input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">End Date</span>
<input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">End Time</span>
<input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<span class="input-group-addon">Male Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
</div>
</div>
<div class="col-lg-4">
<div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<span class="input-group-addon">Female Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
</div>
</div>
<div class="col-lg-4">
<div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
</div>
</div>
</div>
</div>
</div>
</div>
I've switched the way my rows and columns are organised, so that each side is assigned into a row before the left or right columns and therefore the height of the checkboxes will also affect the left side of the page. I then decided to re-order them so it made a bit more sense.
<div class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Start Date</span>
<input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Start Time</span>
<input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">End Date</span>
<input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">End Time</span>
<input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Male Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
</div>
</div>
<div class="col-md-2">
<div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Female Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
</div>
</div>
<div class="col-md-2">
<div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
</div>
</div>
I've been trying to create a bootstrap form with multiple horizontal and vertical elements but couldn't get what I wanted
Requirement
Main <form> contains vertical <formfield> elements
<formfield> element contain all elements horizontally
<formfield> element has one <div> element that contain some vertical elements inside it
I have accomplished first two requirements without any issue but I'm clueless when it comes to last requirement.I've tried searching on google and stakoverflow but no luck yet.
Needed form
Form I'm getting right now
My Code
<form id="grn_items_form">
<div class="form-inline">
<fieldset id="1" class="grn_item_fieldset ">
<div class="form-group">
<button class="form-control" id="1" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="form-group">
<input class="form-control" id="1" type="text" placeholder="Variation">
</div>
<div class="form-group">
<input class="form-control" id="1" type="text" placeholder="Unit Price">
</div>
<div class="form-group">
<input class="form-control" id="1" class="quantity" type="text" disabled="">
</div>
<div class="form-group">
<button class="form-control" id="1" class="add_serial" type="button">Add Serials</button>
</div>
<div class="row ">
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
</div>
</fieldset>
</div>
<div class="form-inline">
<fieldset id="2" class="grn_item_fieldset">
<div class="form-group">
<button class="form-control" id="2" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="form-group">
<input class="form-control" id="2" type="text" placeholder="Variation">
</div>
<div class="form-group">
<input class="form-control" id="2" type="text" placeholder="Unit Price">
</div>
<div class="form-group">
<input class="form-control quantity" id="2" type="text" placeholder="Quantity">
</div>
</fieldset>
</div>
</form>
Any suggestion on right direction is highly appreciated.
This should help. It's not actually showing right on jsfiddle but try to copy the HTML and run local.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<form>
<div class="row" id="row1">
<fieldset>
<div class="row" id="main">
<div class="col-md-1">
<button class="form-control" id="1" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Variation">
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Unit Price">
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<button class="form-control" id="1" class="add_serial" type="button">
Add Serials
</button>
</div>
<div class="col-md-3">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
<div class="row" id="sub1">
<div class="col-md-3 pull-right">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
<div class="row" id="sub1">
<div class="col-md-3 pull-right">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
</fieldset>
</div>
</form>
</div>
The bug is very weird, I have been stucking here for hours just can find why my function in controller is fired.
Here is my HTML code:
<div class="col-md-9 clearfix" id="customer-account" ng-controller='ProfileController'>
<div class="box clearfix">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password_old">oldpassword</label>
<input type="password" class="form-control" id="password_old" ng-model="passwordold">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password_1">newpassword</label>
<input type="password" class="form-control" id="password_1" ng-model="passwordnew1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="password_2">retype</label>
<input type="password" class="form-control" id="password_2"ng-model="passwordnew2">
</div>
</div>
<p>{{passwordnew2}}</p>
</div>
<!-- /.row -->
<div class="text-center">
<button type="submit" class="btn btn-primary">
<i class="fa fa-save" ng-click="changePwd(passwordold,passwordnew1,passwordnew2)"></i> save
</button>
</div>
<div class="text-center" >
<p>{{errorMessageChangepwd}}aaaa</p>
</div>
</div>
</div>
After I click the Button, which ng-click attribute as you can see, nothing happen.
Here is my controller code:
controller('ProfileController', ['$scope','UserFactory','SharedDataFactory',
function($scope,UserFactory,SharedDataFactory){
$scope.user = UserFactory.user;
$scope.passwordold;
$scope.errorMessageChangepwd='error';
$scope.showErrMsgChangepwd = false;
$scope.passwordnew1;
$scope.passwordnew2;
$scope.changePwd = function(passwordold,passwordnew1,passwordnew2){
console.log("aaaaaaaaaa");
if (passwordnew1!==passwordnew2){
$scope.showErrMsgChangepwd= true;
$scope.errorMessageChangepwd = 'error';
}else{
UserFactory.changePwd(passwordnew1)
.catch(function(err){
console.log(err.data);
}).then(function(response){
console.log(response);
});
}
};}]);
I called console.log("aaaaaaaaaa"); in the first line of my function, but after I click the button, nothing is shown on console.
And also
<div class="text-center" >
<p>{{errorMessageChangepwd}}aaaa</p>
</div>`
does not show error aaaa as expected but aaa on the browser.
what could be wrong?
Thanks.
You need to add ng-controller="ProfileController" in the top of your form.
Which looks like missing on your code.
Can some one check my code and tell me why <br> tags aren't working after <textarea> tags <br> and why things messed up after the Date field?
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function(){
$('#dateRangePicker').datepicker({
format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
$('#dateRangeForm').formValidation('revalidateField', 'date');
});
});
</script>
</head>
<body>
<h1 align="center">Some text here</h1>
<div class="form-group">
<div class="col-sm-3">
<label>Full Name:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Father's Name:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Permanent Residential Address:</label>
</div>
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea>
</div><br><br>
<div class="col-sm-3">
<label>Address for Communication:</label>
</div>
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea>
</div><br><br>
<div class="col-sm-3">
<label>Date:</label>
</div>
<div class="col-sm-3 input-group input-append date" id="dateRangePicker">
<input type="text" class="form-control" name="date" style="width:400px;"/>
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div><br><br>
<div class="col-sm-3">
<label>Age as on Date:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px;"/>
</div><br><br>
<div class="col-sm-3">
<label>Caste:</label>
</div>
<div class="col-sm-9">
<label>SC</label>
<input type="radio"/>   
<label>ST</label>
<input type="radio"/>   
<label>OBC</label>
<input type="radio"/>   
<label>GENERAL</label>
<input type="radio"/>
</div><br><br>
</body>
</html>
If you want to add spacing below an element (in this case ) you should really use CSS. It gives you a lot more control, and you can be more certain that different browsers have the same result.
Seeing as you're already using inline styles in this document, you could do it by saying
<div class="col-sm-9" style="margin-bottom: 20px;">
Generally inline styles is not a good idea - you should really have it in a seperate file, using classes and ID's but i assume you know that :)
Looked at the code and it seems as though you don't understand what the
<br>
tag is used for, but as explained here http://www.w3schools.com/tags/tag_br.asp it inserts a single line break. Hope that helped!
There are few modifications needed in your code.
Problem
<br> tag inserts line break which adds extra space between elements.
The Date field is getting misaligned because of incorrect use of input-group class.
There is no semicolon (;) after  . Correct syntax is
Solution
You can eliminate the need of <br> tags by wrapping each element inside form-group
To align Date, create a child container with class input-group.
is not needed. This is not the standard way of writing HTML. Use margin instead.
Have modified your code with above fixes. Check here
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function()
{
$('#dateRangePicker')
.datepicker(
{
format: 'dd/mm/yyyy',
})
.on('changeDate', function(e)
{
$('#dateRangeForm').formValidation('revalidateField', 'date');
});
});
</script>
</head>
<body>
<h1 align="center">Some text here</h1>
<div class="form-group">
<div class="col-sm-3">
<label>Full Name:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Father's Name:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Permanent Residential Address:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Address for Communication:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Date:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<div class="input-group input-append date" id="dateRangePicker">
<input type="text" class="form-control" name="date" style="width:400px; margin-bottom: 10px;" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Things messed up from here ------>
<div class="form-group">
<div class="col-sm-3">
<label>Age as on Date:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Caste:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<label>SC</label>
<input type="radio"/>   
<label>ST</label>
<input type="radio"/>   
<label>OBC</label>
<input type="radio"/>   
<label>GENERAL</label>
<input type="radio"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Educational Qualification:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Sports Event / Game:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<select class="form-control" id="usr" style="width:400px; margin-bottom: 10px;">
<option>Inspector of Income Tax</option>
<option>Tax Assistant</option>
<option>Stenographer-Gr. II</option>
<option>Multitasking Staff</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label>Details of Best Performance:</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/>
</div>
</div>
</body>
</html>