How do I line up input fields with bootstrap? - html

I don't think I quite understand how bootstrap works with the grid. I want the name and actual field to match up unless the screen size is xs so every field is its own row. For each row, I want the text boxes always aligned.
Here's what I've tried.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10 "></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div
Bonus points for someone who can also help me make the description field larger - enough height for at least 20 new lines.


this includes the extra 20 spaces in despcription
Add this to your .css
.col-sm-4 {
display: inline-block;
vertical-align: middle;
float: none;
}
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10" rows="20"></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div

Related

Bootstrap horizontal alignment for different label for form group with error required text

Can anybody tell how to arrange horizontal text box in same row eve though label will be in different line
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label">Roll number <br> Student Code:</label>
<input type="text" class="form-control">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label">School code:</label>
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label>Year Of Passing:</label>
<input type="text" class="form-control">
</div>
</div>
</div>

You can add w-50 d-inline-block class to input and w-25 to label as below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label w-25">Roll number <br> Student Code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">School code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">Year Of Passing:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>

You can wrap input in a div with col-x attribute and add row class to form-group.
An example:
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
The full example here:
https://stackblitz.com/edit/js-bootstrap-css?file=index.html
<div class="row">
<div class="col-12">
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-3 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">School code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">Year Of Passing:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>

form element alignment problem with bootstrap 3

I am using bootstrap 3 for my form design. i am using below structure.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control"/>
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months">
</div>
</div>
</div>
</div>
This layout is working well. But problem is, sometimes i need to hide "monthData" division. When i hide it, there is a empty space right side of the row. how i avoid this.
As a solution i tried to change my layout as below.
<div class="row">
<div class="col-md-6">
form elements
</div>
<div class="col-md-6">
form elements
</div>
</div>
According to my solution, empty space issue is fixed. But Tab index is going up to down. but i need to left to right.
Can you help me to solve these issues. any one know better structure??

Add the tabindex attribute to the input with value in the required sequence.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="1">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="3" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="2" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="4" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="5" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="9" />
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control" tabindex="6" />
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months" tabindex="7">
</div>
</div>
</div>
</div>

How to align separate rows in a form with Bootstrap 3?

I'm struggling with the aliment on a horizontal form using Bootstrap 3. If I put every form-group one after another I have no problem. Check the image:
But as soon I make 2 rows so I can put an image to the right of the first 3 input fields, everything in that row expands and the vertical aliment with the bottom row gets all messed up:
Here's the code:
<form id="new-user-form" class="form-horizontal">
<div class="row">
<div class="col-sm-9">
<div class="form-group">
<label class="col-md-2 control-label">Nombre</label>
<div class="col-md-10">
<input class="form-control" name="fname" placeholder="Nombre" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Apellido</label>
<div class="col-md-10">
<input class="form-control" name="lname" placeholder="Apellido" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Usuario</label>
<div class="col-md-10">
<input class="form-control" name="username" placeholder="Nombre de Usuario" type="text" disabled="">
</div>
</div>
</div>
<div class="col-sm-3"><div class="form-group">
<div class="col-md-12 text-center">
<img src="img/mysteryman.png" />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-10">
<input class="form-control" name="emailaddress" placeholder="Dirección de e-mail" type="email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Tel. Celular</label>
<div class="col-md-10 no-padding">
<div class="col-xs-5 col-sm-4">
<input class="form-control" name="codtelcelular" placeholder="Código de Area" type="tel">
</div>
<div class="col-xs-7 col-sm-8">
<input class="form-control" name="telcelular" placeholder="Teléfono Celular" type="tel">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Tel. Fijo</label>
<div class="col-md-10 no-padding">
<div class="col-xs-5 col-sm-4">
<input class="form-control" name="codtelfijo" placeholder="Código de Area" type="tel">
</div>
<div class="col-xs-7 col-sm-8">
<input class="form-control" name="telfijo" placeholder="Teléfono Fijo" type="tel">
</div>
</div>
</div>
</div>
</div>
</form>
Any ideas? Thanks in advance!

You are missing a row.
<form id="new-user-form" class="form-horizontal">
<div class="row">
<div class="col-sm-9">
<div class="form-group">
<div class="row">
<label class="col-md-2 control-label">Nombre</label>
<div class="col-md-10">
<input class="form-control" name="fname" placeholder="Nombre" type="text">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-2 control-label">Apellido</label>
<div class="col-md-10">
<input class="form-control" name="lname" placeholder="Apellido" type="text">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-2 control-label">Usuario</label>
<div class="col-md-10">
<input class="form-control" name="username" placeholder="Nombre de Usuario" type="text" disabled="">
</div>
</div>
</div>
</div>
<div class="col-sm-3"><div class="form-group">
<div class="col-md-12 text-center">
<img src="img/mysteryman.png" />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-10">
<input class="form-control" name="emailaddress" placeholder="Dirección de e-mail" type="email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Tel. Celular</label>
<div class="col-md-10 no-padding">
<div class="col-xs-5 col-sm-4">
<input class="form-control" name="codtelcelular" placeholder="Código de Area" type="tel">
</div>
<div class="col-xs-7 col-sm-8">
<input class="form-control" name="telcelular" placeholder="Teléfono Celular" type="tel">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Tel. Fijo</label>
<div class="col-md-10 no-padding">
<div class="col-xs-5 col-sm-4">
<input class="form-control" name="codtelfijo" placeholder="Código de Area" type="tel">
</div>
<div class="col-xs-7 col-sm-8">
<input class="form-control" name="telfijo" placeholder="Teléfono Fijo" type="tel">
</div>
</div>
</div>
</div>
</div>
</form>

Print of Html Form by calling windows.print();

On the click of Print button windows.print() function gets called and a print of the form is taken.But in the print every form field gets allocated a entire separate row.I wanted the form fields to be arranged in the same order as they are arranged in the form.
For Ex:Father's Occupation,Education,Income fields are in one single row but in the print they are assigned separate rows.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="form2.css">
</head>
<body>
<div class="container box-container">
<h1 align="center">Admission Form</h1>
<h3 align="center">(2016/2017)</h3>
<br/>
<form class="form-inline" id="sunrise" name="sunrise" method="post" action="">
<div class="row">
<div class="col-md-8 col-sm-12 col-md-offset-4">
<div class="form-group upload"> <label>Upload Child's Image:</label>
<input name="fileUpload" type="file" id="fileUpload" /><br />
<div name="image-holder" id="image-holder"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Scholar No:</label>
<input type="text" class="form-control" name="scholar" placeholder="Scholar No:" disabled>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Class:</label>
<input type="text" class="form-control" name="class" placeholder="Class">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Date:</label>
<input name="date" id="date" name="date" class="form-control" placeholder="Date" disabled>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="name" placeholder="Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Father's Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="father" placeholder="Father's Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Mother's Name:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="mother" placeholder="Mother's Name"></div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>DOB:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="date" class="form-control box-size" name="dob" placeholder="Date of Birth">
</div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Gender:</label></div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <select class="form-control" name="gender">
<option>Male</option>
<option>Female</option>
</select>
</div></div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2">
<label>Category:</label>
</div>
<div class="col-md-10 col-sm-10">
<div class="col-md-6">
<div class="checkbox">
<label><input type="checkbox" value="gen">Gen</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="obc">Obc</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="st">ST</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="sc">SC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="sbc">SBC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="bpl">BPL</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="other">OTHER</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Cast:</label>
<input type="text" class="form-control" name="cast" placeholder="Cast">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Aadhar Card No:</label>
<input type="text" class="form-control" name="aadhar" placeholder="Aadhar Card No">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Religion:</label>
<input type="text" class="form-control" name="religion" placeholder="Religion">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Present Address:</label>
<input type="text" class="form-control" name="present" placeholder="Present Address">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Pin Code:</label>
<input type="text" class="form-control" name="pin" placeholder="Pin Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Permanent Address:</label>
<input type="text" class="form-control" name="permanent" placeholder="Permanent Address">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Pin Code:</label>
<input type="text" class="form-control" name="pincode" placeholder="Pin Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Mobile No 1:
</label>
<input type="text" class="form-control" name="mobile" placeholder="Mobile Number 1">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>2:</label>
<input type="text" class="form-control" name="mobile2" placeholder="Mobile Number 2">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>3:</label>
<input type="text" class="form-control" name="mobile3" placeholder="Mobile Number 3">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Occuption</label>
<input type="text" class="form-control" name="fatherjob" placeholder="Father's Occuption">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Education:</label>
<input type="text" class="form-control" name="fatheredu" placeholder="Education">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Income:</label>
<input type="text" class="form-control" name="fatherincome" placeholder="Income">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Occuption</label>
<input type="text" class="form-control" name="motherjob" placeholder="Mother's Occuption">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Education:</label>
<input type="text" class="form-control" name="motheredu" placeholder="Education">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Income:</label>
<input type="text" class="form-control" name="motherincome" placeholder="Mother Income">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2"> <label>Last School Name:</label>
</div>
<div class="col-md-10 col-sm-10"><div class="col-md-6 col-sm-6"> <input type="text" class="form-control box-size" name="lastschool" placeholder="Last School Name">
</div></div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Passed Class:</label>
<input type="text" class="form-control" name="classpassed" placeholder="Passed Class">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group" >
<label>Obtained Marks:</label>
<input type="text" class="form-control" name="marksobtained" placeholder="Obtained Marks">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Percentage:</label>
<input type="text" class="form-control" name="percentage" placeholder="Percentage">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Hosteler/Day Scholar:</label>
<select class="form-control" name="hostelornot">
<option>Day Scholar</option>
<option>Hosteler</option>
</select> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>
Bus Facility:</label>
<input type="text" class="form-control" name="bus" placeholder="Bus Facility">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Physical Disability:</label>
<select class="form-control" name="disability">
<option>NO</option>
<option>YES</option>
</select> </div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group" >
<label>Any allergical disease:</label>
<input type="text" class="form-control" name="disease" placeholder="Any allergical disease">
</div>
</div>
</div>
<h2 align="center">Declaration By Parent</h2>
<div class="">
<div class="checkbox">
<label><input type="checkbox" value="done" required /></label>We have read the prospectus of Sunrise International Public School and undertake to abide by all the rules as laid down in the school prospectus, we also agree to abide by any amendment to these rules, which may be incorporated from time to time.
</div>
</div>
<br/>
<br/>
<div class="row signature">
<div class="">
<label>Candidate's Signature:</label>
</div>
<div class="">
<label>Parent's Signature:</label>
</div>
<div class="">
<label>Principal's Signature:</label>
</div>
</div>
<br/>
<br/>
<button type="button" class="btn btn-default" id="print" onclick="window.print()">Print Application</button>
<button type="submit" class="btn btn-default" name="submit" value="submit">Submit</button>
</form>
</div>
<script>
$("#fileUpload").on('change', function () {
if (typeof (FileReader) != "undefined") {
var image_holder = $("#image-holder");
image_holder.empty();
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
});
</script>
<script type="text/javascript">
document.getElementById('date').value = Date();
</script>
</body>
</html>

How to fixed the form fields alignment issues using css and bootstrap

I have created a form using bootstrap. When it displays an error, the div block below the error shifts to right. How can this be fixed using CSS?
This is a screenshot of how it looks after an error is shown:
Code
https://jsfiddle.net/yzm2aj9j/#&togetherjs=Q8Bk7CaMjy
<form>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="username" class="col-md-6 control-label">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="col-xs-12" style="color:#ff5555;">
<span class="error">User Name Cannot Be Blank</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="phone" class="col-md-6 control-label">Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" id="phone" placeholder="phone">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</form>

According to Bootstrap's Documentation:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
If default grids are being used then rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
You need to wrap two .col-xs-6 in one .row. Your code structure should be like this:
<div class="row">
<div class="col-xs-6">
// column content goes here...
</div>
<div class="col-xs-6">
// column content goes here...
</div>
</div>
<div class="row">
<div class="col-xs-6">
// column content goes here...
</div>
<div class="col-xs-6">
// column content goes here...
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="username" class="col-md-6 control-label">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="col-xs-12" style="color:#ff5555;">
<span class="error">User Name Cannot Be Blank</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="phone" class="col-md-6 control-label">Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" id="phone" placeholder="phone">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</form>