why does background image not fit in properly in bootstrap fluid container? - html

background image only appears in the first two columns not not in the background of the whole container. I have used the code below:
<div class="container-fluid bg">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<form class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>
and css file is:
.bg{
background: url('bg.jpg');
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
.form-container{
border: 1px solid;
}


Use background-repeat: no-repeat; background-size: cover;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg">
<div class="container-fluid bg">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<form class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>
</div>
</body>
</html>


Remove background-repeat: no-repeat; and add 100% height on body and html.
html,
body {
height: 100%;
}
.bg {
background: url('https://picsum.photos/100/100');
height: 100%;
width: 100%;
}
.form-container {
border: 1px solid;
}
<div class="container-fluid bg">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<form class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>


Include background-size: cover
.bg {
background-image: url('https://via.placeholder.com/200x200');
background-size: cover;
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
.form-container {
border: 1px solid;
}
<div class="container-fluid bg">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<form class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>

Related

Each text box should be in a new row in the panel

I have created a panel for my webpage. The panel contains two text boxes with labels. As of now the two text boxes are in the same row. I want each text box to be in a different row. How should I do it? I have tried including the <br> inside the panel.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
</style>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-3">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-3">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="save"></label>
<div class="col-md-8">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I can see two text boxes with name and email coming in one row.
What I have tried is
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
by referring to this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_stacked_form,
but its not working. What am I doing wrong?

You want something like this?
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your name</label>
<div class="col-md-7">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label"><span style="color:red">*</span>Enter your email</label>
<div class="col-md-7">
<input id="candidate-email" name="candidate-email" type="email"
placeholder="johndoe#example.com" class="form-control input-md" required>
</div>
</div>
</div>
Or Like this:
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-3 col-sm-3 clo-xs-3">
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your name</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
<div class="col-lg-6 col-md-3 col-sm-4 clo-xs-3" >
<div class="form-group">
<label class="formGroupExampleInput" for="formGroupExampleInput">Enter your email</label>
<input id="afm" class="form-control custom-input-text" placeholder="">
</div>
</div>
</div>
</div>
</div>
</div>

Issue is using col remove that col form label and input will fix the issue
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.navbar img {
float: left;
width: 80px;
height: 80px;
position: relative;
top: -12px;
}
.navbar h1 {
top: 18px;
font-size: 30px;
color: brown;
text-align: center;
}
.navbar {
min-height: 80px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color:powderblue;">
<nav class="navbar navbar-default header">
<div class="container-fluid">
<div class="navbar-header">
<h1>My heading</h1>
</div>
</div>
</nav>
<div class="container">
<div class="panel panel-default" style="max-width:500px;margin-left:auto;margin-right:auto;">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>Thankyou for applying with us. To schedule an interview please fill the below details </p>
<div class="form-group ">
<label class=" control-label"><span style="color:red">*</span>Enter your name</label>
<div class="">
<input id="candidate-name" name="candidate-name" type="text" placeholder="John"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label"><span style="color:red">*</span>Enter your email</label>
<div class="">
<input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe#example.com"
class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class=" control-label" for="save"></label>
<div class="">
<input class="btn btn-success show-modal" type='submit' id='submit' value='Go for schedule'>
</div>
</div>
</div>
</div>
</div>
</body>

Content not displaying inside div

This is my html code
I cannot understand why the contents are not showing inside the div.
<div class="contact-form">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label">Full Name :</label>
<div class="">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label">Subject :</label>
<div class="">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
Heres my style
.contact .contact-form{
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
}
Can someone help me? Thanks in advance.

Try this:
CSS
.contact-form{
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
DEMO HERE

Because you have not used row div, you are using bootstrap structure ,so you should use cols (col-lg-12 col-md-12 col-sm-12 col-xs-12) in row.
try this:
<div class="row contact-form">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label">Full Name :</label>
<div class="">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label">Subject :</label>
<div class="">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>

Why are the input boxes completely overflowing their bounding divs?

I intend to line up 4 input text boxes housed in 4 equal sized columns in one row of the form. Making use of Bootstrap's grid column classes, I assigned col--3 for medium and large screen sizes to those four input divs.
Likewise for small and extra small sizes, I assigned them col--12 so that the inputs occupy their own whole row. Then my guide wanted those input boxes sizes reduced. I added offset class to the four input and reduced their column span to 6 columns. These were centered appropriately.
However, this change screwed up my small screen layout. Now there are only two inputs in each row, while the other two in the next row.
/* button modification*/
#button-wrapper {
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button {
margin: auto 0.5em;
}
.inner {
margin: 0 auto 0 auto;
width: 150px;
padding: 0;
/* center the block element*/
}
img {
min-width: 100%;
}
input {
height: 60%;
margin: 0px;
}
/* square boxes*/
.square-elem {
border-radius: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<form id="registration-form" class="">
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
DOWNLOAD EBOOK
</div>
</div>
</div>
<!-- </div>
-->
</form>
</body>
Here's the JSFiddle(Drag the frame) too. It seems the inputs(in each form group div) have completely positioned outside their bounding div box.The intended output should be the four inputs lined side by side in one row.
What can possibly be the issue here?

If your problem is, the offset is still in larger screens,You have to reverse the offsetting for each of the other col-classes .Give col-md-offset-0 to the divs where you specified offset for smaller device
/* button modification*/
#button-wrapper {
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button {
margin: auto 0.5em;
}
.inner {
margin: 0 auto 0 auto;
width: 150px;
padding: 0;
/* center the block element*/
}
img {
min-width: 100%;
}
input {
height: 60%;
margin: 0px;
}
/* square boxes*/
.square-elem {
border-radius: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<form id="registration-form" class="">
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-md-offset-0 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-md-offset-0 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
DOWNLOAD EBOOK
</div>
</div>
</div>
<!-- </div>
-->
</form>
</body>

you have classes col-sm-offset-3 and col-xs-offset-3 these classes 'push' the columns with a number of 3 columns. so the inputs have margin-left equal to 3 column widths
see more here > http://getbootstrap.com/css/#grid-offsetting
remove those classes and everything will work ok
see here fiddle
or snippet below
/*Main box*/
div #ebook-registration-box
{
border: 2px solid #d3d3d3;
padding: 10px;
margin: 10px auto;
}
/* button modification*/
#button-wrapper
{
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button
{
margin: auto 0.5em;
}
.inner
{
margin: 0 auto 0 auto;
width: 150px;
padding: 0 ;
/* center the block element*/
}
/* fixed height for responsive images
(does not work)*/
img
{
min-width: 100%;
}
input
{
height: 60%;
margin: 0px;
}
/* square boxes*/
.square-elem
{
border-radius: 0px;
}
/* */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="ebook-registration-box" class="row">
<div class="col-md-12" >
<div id="registration-header" class="row">
<div class="col-md-12">
<p class="text-center">
Register to download the device launch guide
</p>
</div>
</div>
<!-- 4 form elements-->
<form id="registration-form" class="" >
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<!-- Download Button -->
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
DOWNLOAD EBOOK
</div>
</div>
</div> <!-- </div>-->
</form>
</div>
</div>

Is this what you were wanting? You just needed to disable the offset for the larger widths and make the offset smaller for xs widths.
#button-wrapper {
width: 40%;
min-width: 200px;
margin: 0 auto;
}
#ebook-download-button {
margin: auto 0.5em;
}
.inner {
margin: 0 auto 0 auto;
width: 150px;
padding: 0;
/* center the block element*/
}
img {
min-width: 100%;
}
input {
height: 60%;
margin: 0px;
}
/* square boxes*/
.square-elem {
border-radius: 0px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="ebook-registration-box" class="row">
<div class="col-md-12" >
<div id="registration-header" class="row">
<div class="col-md-12">
<p class="text-center">
Register to download the device launch guide
</p>
</div>
</div>
<!-- 4 form elements-->
<form id="registration-form" class="" >
<!--<div class="col-md-12 col-sm-12">-->
<div class="row">
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1 ">
<div class="form-group">
<input type="input" class="form-control square-elem" id="first-name" placeholder="First Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="form-group">
<input type="input" class="form-control square-elem" id="last-name" placeholder="Last Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="form-group">
<input type="input" class="form-control square-elem" id="company" placeholder="Company">
</div>
</div>
<div class="col-lg-3 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="form-group">
<input type="input" class="form-control square-elem" id="email" placeholder="Email">
</div>
</div>
</div>
<div class="row">
<div id="button-wrapper" style="">
<div id="ebook-download-button" class="col-md-12 col-sm-12 col-xs-12 text-center">
DOWNLOAD EBOOK
</div>
</div>
</div> <!-- </div>-->
</form>
</div>
</div>

You can also use "form-inline" class on <form> for horizontal form display.

How do I align / anchor Html with the edges of available area?

I am having a bit of a styling problem in that I want my form elements to take up to available size when using the bootstrap grid system. In the code example here
<div>
<h1>Data Entry Form</h1>
<div class="row form">
<div class="col-sm-8">
<div class="row">
<div class="form-group col-sm-6">
<label for="Callsign">Callsign: VH-</label>
<input name="Callsign" />
</div>
<div class="form-group col-sm-6">
<label for="acType">Type:</label>
<input name="acType" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-2">
<label for="Description">Description:</label>
</div>
<div class="form-group col-sm-10">
<textarea name="Description"></textarea>
</div>
</div>
</div>
</div>
This is rendered like this
However I need it rendered like this
How can I achieve this?

Try with bootrap Class form-control
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div>
<h1>Data Entry Form</h1>
<div class="row form">
<div class="col-xs-8">
<div class="row">
<div class="form-group col-xs-3">
<label for="Callsign">Callsign: VH-</label>
</div>
<div class="form-group col-xs-4">
<input class="form-control" name="Callsign" />
</div>
<div class="form-group col-xs-1">
<label for="acType">Type:</label>
</div>
<div class="form-group col-xs-4">
<input class="form-control" name="acType" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<label for="Description">Description:</label>
</div>
<div class="form-group col-xs-8">
<textarea class="form-control" name="Description"></textarea>
</div>
</div>
</div>
</div>
</body>

Edited:
First you need to style the text-area with a width of 100%. There is a media query which is making the text-area go to a new line. If you can not remove that query you can add a new one to avoid the behaviour:
textarea {
width: 100%;
}
#media (max-width: 769px) {
.col-sm-10 {
width: 83.33333333%;
float: left;
}
.col-sm-2 {
width: 16.66666667%;
float: left;
}
.col-sm-6 {
width: 50%;
float: left;
}
}
textarea {
width: 100%;
}
#media (max-width: 769px) {
.col-sm-10 {
width: 83.33333333%;
float: left;
}
.col-sm-2 {
width: 16.66666667%;
float: left;
}
.col-sm-6 {
width: 50%;
float: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<h1>Data Entry Form</h1>
<div class="row form">
<div class="col-sm-8">
<div class="row">
<div class="form-group col-sm-6">
<label for="Callsign">Callsign: VH-</label>
<input name="Callsign" />
</div>
<div class="form-group col-sm-6">
<label for="acType">Type:</label>
<input name="acType" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-2">
<label for="Description">Description:</label>
</div>
<div class="form-group col-sm-10">
<textarea name="Description"></textarea>
</div>
</div>
</div>
</div>

Alternate layout based on size

I am entertaining the idea of using bootstrap for all future pages on our internal website. The following image looks and works great on all sized devices.
The issue is that I used one row containing two horizontal labels and inputs for each line. When the bootstrap resizes, the rows are merged. The issue is that the two columns are separate subjects and when the device view port is smaller, the right column should position itself underneath the left column. Instead they merge. Left column item 1 is first and then right column item 1 is second. I need it too be all of left column and then all of right column.
Any direction on this issue would be very helpful.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: #efefef;
text-align: center;
border: 2px solid blue;
}
h1{
margin: auto;
}
.body{
border: 2px solid blue;
margin-top: 10px;
}
.inline{
display: inline-block;
}
.no-margin{
margin: 0px;
}
label{
width: 140px;
margin-right: 5px;
text-align: left;
white-space: nowrap;
}
input{
margin-left: 0px;
margin-top: 10px;
}
.left_margin{
margin-top: 10px;
margin-left: 230px;
}
#media screen and (min-width: 768px){
label{
text-align: right;
}
input{
margin-left: 10px;
margin-top: 10px;
}
}
<div class="col-lg-12 header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-inline" role="form">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<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.6/js/bootstrap.min.js"></script>

The id must be unique.
col-lg-6 col-md-6 col-sm-12 col-xs-12 is equivalent to col-md-6.
Wrap up left and right columns of fields by two <div class="col-md-6"></div> blocks.
I guess you need to use the Horizontal form instead of the Inline form.
Place labels into <div class="form-group"></div> blocks.
Make labels left-floating and use the hidden: overflow; trick to fill all the remaining space by the non-floating block.
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
h1.lead {
margin: 0;
padding: 12px;
}
.body{
border: 2px solid blue;
margin-top: 10px;
padding-top: 12px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-horizontal .control-label {
display: block;
float: left;
margin-bottom: 0;
margin-right: 20px;
padding-top: 7px;
white-space: nowrap;
}
.form-horizontal .form-control {
width: 100%;
}
.fill-free-space {
overflow: hidden;
}
<div class="header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="input_left_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_1" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_2" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_3" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_4" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_5" placeholder="Left">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="input_right_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_1" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_2" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_3" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_4" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_5" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_6" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_6" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_7" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_7" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_8" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_8" placeholder="Right">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<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.6/js/bootstrap.min.js"></script>