how to design in bootstrap textbox and lable without space - html

i need some help for front end side. i have below picture i want to design form like below picture in bootstrap but in bootstrap how do this please help check my below html.
<div class="col-sm-2">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
i want like this
my bootstrap


Need to Update with this CSS and HTML. It's Responsive so you can check properly. I hope this one help you.
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
input{
width:100px;
}
label{
padding:5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<form class="form-inline">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name" >
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</form>
</div>


<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
#media (min-width: 768px){
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
display: inline-flex;
}
}
</style>
</head>
<body>
<div class="col-md-12 form-inline">
<div class="col-md-2" style="display: inline-flex;">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
</div>
</body>
</html>


label {
margin-bottom: .5rem;
display: contents !important;
}
.form-control {
display: initial !important;
width: auto !important;}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="col-sm-2">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
</body>
</html>

Related

Text field in same line HTML

How to make multiple text fields in the same line.
This is my code:
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year"/>Year
<input type="text" class="form-control " placeholder="Month"/>Month
<input type="text" class="form-control " placeholder="Day" />Day
</div>
</div>

It's by default. input is inline element.
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year" />Year
<input type="text" class="form-control " placeholder="Month" />Month
<input type="text" class="form-control " placeholder="Day"
Day
</div>
</div>
In bootstrap you can put all of the fields that you want on a single line within a single form-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>

It seems, you are using Bootstrap, if yes, then;
Add class .form-inline to the <form> element.
else, Add these css properties to <form>,
display: inline-block;
width: auto;

You can try this way too.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="col-lg-2">
<div class="form-group" >
<label style="width:25%; float:left;">Working experience</label>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Year"/>Year
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Month"/>Month
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Day"/>Day
</div>
</div>
</div>
</body>
</html>

Use Bootstrap:
<form class="form-inline" action="/action_page.php">
<label>Working experience : </label>
<div class="form-group">
<input type="text" class="form-control" id="year" placeholder="Year" name="year">
</div>
<div class="form-group">
<input type="text" class="form-control" id="month" placeholder="Month" name="month">
</div>
<div class="form-group">
<input type="text" class="form-control" id="day" placeholder="Day" name="day">
</div>
</form>

You could use inline form class.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control" placeholder="Year">
<input type="text" class="form-control" placeholder="Month">
<input type="text" class="form-control " placeholder="Day">
</div>
</form>
Use Expand snippet to see actual result.

Bootstrap - checkbox left aligning issue

I Have the following bootstrap form broken into groups.
I am trying to add a checkbox but, it doesn't seem to left align correctly.
How can i make the check box left align and under the "Max Amount" ?
and i want to add radio button to the next group.
My Fiddle
<div class="panel panel-primary">
<div class="panel-heading"> Information</div>
<div class="panel-body">
<!---->
<fieldset>
<legend> Borrowing Power</legend>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Desired Amount</label>
<!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
<input name="desiredamount" id="" class="form-control input-normal desiredLoan">
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation" class="">Max Loan Amount</label><br>
<input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
<!---->
</div>
<div class="container-fluid"><!-- Row 2 -->
<!--
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="mobile">Mobile Phone</label>
<input name="mobile" id="mobile" class="form-control input-normal">
<p class="help-block">The users mobile phone number.</p>
</div>
</div>
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="level">User Access Level</label>
<select name="level" id="level" class="form-control input-normal">
<option value="1">1</item>
<option value="2">2</item>
</select>
<p class="help-block">The users system access level.</p>
</div>
</div> --->
<!---->
</div>
</div>

The problem is in form-control class which has width:100%
Solution
Add another class after form-control class
<input class="form-control auto-width pull-left" id="" name="" class="pull-left" type="checkbox" />
.auto-width {
width: auto;
}

Just try by removing "form-control" class from Checkbox

In this way I normally achieve it...just use column nesting
check the snippet I have nested class="col-sm-2" column inside class="col-sm-6" and added a margin-top
#check {
margin-top: -5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="panel panel-primary">
<div class="panel-heading"> Information</div>
<div class="panel-body">
<!---->
<fieldset>
<legend> Borrowing Power</legend>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Desired Amount</label>
<!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
<input name="desiredamount" id="" class="form-control input-normal desiredLoan">
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation" class="">Max Loan Amount</label><br>
<div class='col-sm-2' id="check">
<input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
<!---->
</div>
<div class="container-fluid"><!-- Row 2 -->
<!--
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="mobile">Mobile Phone</label>
<input name="mobile" id="mobile" class="form-control input-normal">
<p class="help-block">The users mobile phone number.</p>
</div>
</div>
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="level">User Access Level</label>
<select name="level" id="level" class="form-control input-normal">
<option value="1">1</item>
<option value="2">2</item>
</select>
<p class="help-block">The users system access level.</p>
</div>
</div> --->
<!---->
</div>
</div>
</body>
</html>
Hope this helps!

Form field layout issue with Bootstrap 3

I'm a bit of a novice when it comes to Bootstrap and I'm struggling to get some form fields to conform to my desired layout. My sample snippet of HTML code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<form id="frmRegister" class="form-horizontal">
<div id="divContainer" class="container-fluid" style="width: 90%">
<h2 id="h2Registration" style="background-color: #F76803; color: white; margin: 3px 3px 3px 3px"></h2>
<div id="divChild1">
<div class="form-group">
<label for="txtChildLastName1" class="control-label col-xs-1">Last Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildLastName1" maxlength="25" />
</div>
<label for="txtChildFirstName1" class="control-label col-xs-1">First Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildFirstName1" maxlength="25" />
</div>
<label for="txtChildMiddleInit1" class="control-label col-xs-1">Initial</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildMiddleInit1" maxlength="1" />
</div>
<label for="txtChildSuffix1" class="control-label col-xs-1">Suffix</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildSuffix1" maxlength="5" />
</div>
</div>
<div class="form-group">
<label for="groupGender" class="control-label col-xs-1">Gender *</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderMale1" value="M" />Male
</label>
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderFemale1" value="F" />Female
</label>
</div>
<label for="txtChildDOB1" class="control-label col-xs-1">DOB *</label>
<div class="col-xs-1">
<input type="date" class="form-control dateTextBox" style="position: absolute; z-index: 999" id="txtChildDOB1" name="txtChildDOB1" value="" />
</div>
<label for="txtDoctorName1" class="control-label col-xs-1">Doctor Name</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtDoctorName1" maxlength="50" />
</div>
<label for="txtDoctorPhone1" class="control-label col-xs-1">Doctor Phone</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtDoctorPhone1" maxlength="50" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteDues1" class="control-label col-xs-1">Registration Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtAthleteDues1" placeholder="85" maxlength="2" />
</div>
<label for="txtUniform1" class="control-label col-xs-1">Uniform</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtUniform1" maxlength="50" placeholder="Estimate size, if needed" />
</div>
<label for="txtUniformFee1" class="control-label col-xs-1">Uniform Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtUniformFee1" placeholder="80" maxlength="2" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteFees1" class="control-label col-xs-1">Athlete Fees</label>
<div class="col-xs-11">
<input type="text" class="form-control" id="txtAthleteFees1" disabled="disabled" value="Some descriptive text goes here" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The culprit appears to be my use of the input-group/input-group-addon classes which prepend the field with the dollar sign (Registration Fee). The result is that the subsequent fields for Uniform and Uniform Fee wrap to the next row rather than appearing inline on the same row with Registration Fee. The first two rows, which don't use input-group/input-group-addon do not have this problem.

Instead of using col-* and input group together, put the input-group inside the col-* like this..
<div class="col-xs-1">
<div class="input-group">
<div class="input-group-addon"> .. </div>
http://www.bootply.com/g6rtaYL4fy

Textarea using Bootstrap too wide and not aligning

I just started with Bootstrap and having an issue with textarea HTML element - it doesn't follow left alignment with other text fields and goes across the entire page instead. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body name="viewport" content="width=device-width, initial-scale=1.0">
<div id="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="name">
Name
</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="name" placeholder="Your name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">
E-mail
</label>
<div class="col-sm-4">
<input class="form-control" type="email" id="email" placeholder="Your email address" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="comment">
Message
</label>
<div class="cols-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input class="btn btn-success" type="submit" value="Send" />
</div>
</div>
</form>
</div>
</body>
</html>
And the result looks like this below.
Textarea too wide and not aligning with other text elements above it

fix this:
<div class="cols-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
to
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>

You could add:
.cols-sm-4{
width: 33.33333333%;
margin-left: 15px;
display: inline-block;
}

Create two HTML Forms next to each other

I am new to HTML. I am wondering if you could have two forms setting next to each other in parallel in HTML. I have generated this sample GUI with Tkinter and I want to generate a HTML file for the GUi with Bootstrap style.

Something like this would do it: (The borders are just so you can see the effect.)
div
{
border: 1px solid red;
}
#left
{
float: left;
width: 64%;
}
#right
{
float: right;
width: 35%;
}
<div id="left">Left Stuff</div>
<div id="right">Right Stuff</div>

Yea...
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<button type="button" class="btn btn-default">SUBMIT</button>
</div>
</form>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<button type="button" class="btn btn-default">SUBMIT</button>
</div>
</form>
</div>
</div>
Hope this helps

I do not know your html file, but I think bootstrap can provide a built-in solution. Just refer to the official documentation and start with a basic template like this:
<div class="container">
<div class="row">
<div class="col-sm-8"> <--the big form-->
<form id="big">
<div class="form-group">
...
</div>
</form>
</div>
<div class="col-sm-4"> <--the small one-->
<form id="small">
<div class="form-group">
...
</div>
</form>
</div>
</div>
</div>
You can use many other classes and of course customize your own in your stylesheet

Well, if you're using Bootstrap, it's very easy. Try the following :
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-2">
<label for="label-name" class="control-label">Text Here</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="some-text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-2">
<label for="label-name" class="control-label">Text Here</label>
</div>
<div class="col-md-6">
<input type="checkbox">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6">
<button type="button" class="btn btn-default">Run</button>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</body>
</html>

Ok, sounds like 1 form, you just want it styled a certain way:
<div class="row">
<div class="form-group">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>Settings</p>
<label for="label-name" class="control-label">Label1</label>
<input type="text" class="form-control" id="some-text">
<label for="label-name" class="control-label">Label2</label>
<input type="text" class="form-control" id="some-text">
<label for="label-name" class="control-label">Label3</label>
<input type="text" class="form-control" id="some-text">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>Options</p>
<label for="label-name" class="control-label">Label4</label>
<input type="checkbox"></br>
<label for="label-name" class="control-label">Label5</label>
<input type="checkbox"></br>
<label for="label-name" class="control-label">Label6</label>
<input type="checkbox">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-default">Run</button>
</div>
</div>