My columns are too small inside my panel - html

As you can see from my image I have a panel with 2 columns inside. I also need these columns to have input fields for a form. The problem is I can't get the input field width to be the same size as the column. Any help would be appreciated.
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="POST" class="form-horizontal" role="form">
<div class="panel panel-default">
<div class="panel-heading">
Test Heading
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-2 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-2 control-label" for="Column2Row1">Column2Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column2Row1">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>


Change
<div class="form-group">
<label class="col-md-2 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-4">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
to
<div class="row form-group">
<label class="col-md-3 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
I have included row class and then inside the row you need to extend the label and input in total to 12 columns. So, the label occupies 3 columns and input field occupies 9 columns.
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="POST" class="form-horizontal" role="form">
<div class="panel panel-default">
<div class="panel-heading">
Test Heading
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<label class="col-md-3 control-label" for="Column1Row1">Column1Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column1Row1">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row form-group">
<label class="col-md-3 control-label" for="Column2Row1">Column2Row1</label>
<div class="col-md-9">
<input class="form-control input-sm" type="text" name="" value="" id="Column2Row1">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

Related

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>

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>

Bootstrap Control Layout Offset Issue

I have the following fiddle which is a cut down sample of a page I am working on utilising bootstrap for the styling.
NOTE: When viewing the fiddle, make sure the Result pane is wide enough to have the first 3 controls on a single row!
The issue that I have is that the 'Free Text Search' row of controls seem to be offset to the right more than I would like. I want the 'Free Text Search' label to be directly under the 'Store Number' label and the same width. Along with that I wand the corresponding input to start at the beginning of the 'Store Number' input and finish at the end of the 'Parent Category' select.
I can't quite see where I have gone wrong with the bootstrap classes.
Here is my html:
<form class="form-horizontal">
<h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3>
<div class="row form-group">
<div class="col-md-4">
<label for="storeNumber" class="col-sm-4 control-label">Store Number</label>
<div class="col-sm-6">
<input id="storeNumber" class="form-control" type="text"
name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="col-md-4">
<label for="actionedTo" class="col-sm-4 control-label">Actioned To</label>
<div class="col-sm-6">
<select id="actionedTo" class="form-control"></select>
</div>
</div>
<div class="col-md-4">
<label for="parentCategory"
class="col-sm-4 control-label">Parent Category</label>
<div class="col-sm-6">
<select id="parentCategory" class="form-control"></select>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="freeTextSearch"
class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text"
name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</form>

Your general structure is counter to your classes. You're structuring for your inputs to position inline but you're using form-horizontal and you're nesting columns.
You don't need any of that markup for this. Just use the form-group class and columns.
See working Snippet.
*The CSS I've added isn't needed to make everything work but I believe it looks better on larger viewports with it.
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</form>
</div>
Alternative Layout for Multiple Controls
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</div>
</form>
</div>

How do I line up input fields with bootstrap?

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

How to set labels above the input with #media?

I have simple Bootstrap block which looks like this:
The main problem occurs on smaller resolution, like 1280*600:
As you can see the mos of the ip is not seen, so I want to set labes above the inputs like this:
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput" style="text-align:center">Server IP</label>
<div class="col-sm-4">
<input type="text" placeholder="Enter IP Address" class="form-control">
</div>
<label class="col-sm-1 control-label" for="textinput">Port</label>
<div class="col-sm-3">
<input type="text" placeholder="Enter Port" class="form-control">
</div>
</div>
</div>

I assume you mean 600x1280 rather than the other way round as 1280x600 is quite wide.
How about something like this..
<div class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-7">
<div class="container-fluid">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label" for="textinput" style="text-align:center">Server IP</label>
<div class="col-xs-12 col-sm-9">
<input type="text" placeholder="Enter IP Address" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="container-fluid">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label" for="textinput">Port</label>
<div class="col-xs-12 col-sm-9">
<input type="text" placeholder="Enter Port" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>