Is it possible to create a two columns form with twitter bootstrap?
They have some nice examples here:
http://twitter.github.com/bootstrap/base-css.html
But unfortunately all of them are using one column.
Wrap the form tag around your span divs. This is working for me, but you might need to tweak things a bit:
<div class="row">
<form class="form-horizontal">
<div class="span6">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</div>
<div class="span6">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</div>
</form>
</div>
<div class="row">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<label>First Name</label>
<input type="text" class="span12" placeholder="">
</div>
<div class="span6">
<label>Last Name</label>
<input type="text" class="span12" placeholder="Type something…">
</div>
</div>
</div>
</div>
example: http://jsfiddle.net/JJnDg/460/
2 columns in Bootstrap 3 :
http://jsfiddle.net/52VtD/10419/
<div class="container">
<div class="row">
<form action="#">
<div class="col-xs-6">
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="example#domain.com">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
Example two columns with Bootstrap3
<div class="row">
<label>Date</label>
<div class="row">
<div class="col-xs-7" style=" padding: 0px 2px 2px 1px;">
<input type="date" class="form-control col-xs-12">
</div>
<div class="col-xs-5" style="padding: 0px 1px 2px 1px;">
<input type="time" class="form-control col-xs-12">
</div>
</div>
</div>
<div class="row-fluid">
<form id="myForm" modelAttribute="mymodel">
<div class="span12">
<div class="well clearfix">
<div class="span5">
<legend>Text1</legend>
<table width="100%" align="center">
<tr>
<td>
<label for="lable1">Label1 *</label>
</td>
<td>
<input id="input1" class="input-xlarge"/>
</td>
</tr>
<tr>
<td>
<label for="lable2">Label2 *</label>
</td>
<td>
<input id="input2" class="input-xlarge"/>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn" type="reset" id="resetButton">Reset</button>
</td>
</tr>
</table>
</div>
<div class="span5 offset1">
<legend>Text2</legend>
</div>
</div>
</div>
</form>
I used this and it works pretty well.. Its responsive to bootstrap
<div class="row-fluid">
<div class="span12">
<form action="" class="form-horizontal" name="user_account_add" id="user_account_add" method="post">
<div class="span12">
<div class="well clearfix">
<fieldset>
<div class="span5">
<legend>Business Info</legend>
<input type="hidden" name="action" value="save" />
<div class="control-group">
<label class="control-label">Business Name: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="business_name" id="business_name">
</div>
</div>
<legend>Owner Info</legend>
<div class="control-group">
<label class="control-label">Firstname: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="fname" id="owners_name">
</div>
</div>
<div class="control-group">
<label class="control-label">Lastname: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="Lname" id="owners_name">
</div>
</div>
</div>
<div class="span7">
<legend>Business Operation Location</legend>
<div class="control-group">
<label class="control-label">Street Address</label>
<div class="controls">
<input type="text" class="input-xlarge" name="address" id="address" >
</div>
</div>
<div class="control-group">
<label class="control-label">City</label>
<div class="controls">
<input type="text" class="span3" name="city" id="city">
</div>
</div>
<div class="control-group">
<label class="control-label">State</label>
<div class="controls">
<input type="text" class="span3" name="state" id="state">
</div>
</div>
<div class="control-group">
<label class="control-label">Zip</label>
<div class="controls">
<input type="text" class="span3" name="zip" id="zip">
</div>
</div>
</div>
</fieldset>
<button class="btn btn-primary">Submit</button>
<button class="btn">Clear</button>
</div>
</div>
</form>
</div>
</div>
I use the following
<form class="no-margin" >
<fieldset>
<div class="form-group no-margin">
<div class="row-fluid">
<div class="form-group col-sm-6 no-margin"> Input 1 <div>
<div class="form-group col-sm-6 no-margin"> Input 2 <div>
</div>
</div>
<fieldset>
</form>
Related
I have made this form which behaves and looks decent on all size larger the xs (extra small).
.row {
margin-bottom: 20px;
}
.row:first-of-type {
margin-top: 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<form action="" method="GET" role="form" class="form-horizontal">
<div class="row">
<legend>Form title</legend>
</div>
<div class="row">
<div class="form-group">
<label for="first-name" class="col-sm-2">Your First Name: </label>
<div class="col-sm-4">
<input type="text" class="form-control" id="first-name" placeholder="Please enter your first name.">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="last-name" class="col-sm-2">Your Last Name: </label>
<div class="col-sm-4">
<input type="text" class="form-control" id="last-name" placeholder="Please enter your last name.">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="email" class="col-sm-2">Your Email: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" placeholder="Please enter your email adresse.">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="phone" class="col-sm-2">Your Phone Number: </label>
<div class="col-sm-3">
<input type="text" class="form-control" id="phone" placeholder="Please enter your phone number.">
</div>
</div>
</div>
<div class="row">
<button type="submit" class="col-sm-1 btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
But when the display becomes extra small then the inputs and labels stretch until the edges of the browser window.
I would like to have a small margin on the left and on the right.
I'm I doing something wrong?
Is there are way to fix this issue with just bootstrap?
Or do I have to add some additional CSS?
A very simple solution. Actually a blunder.
Just change the class="form-horizontal" to class="form-vertical" ....
DEMO:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<form action="" method="GET" role="form" class="form-vertical">
<div class="row">
<legend>Form title</legend>
</div>
<div class="row">
<div class="form-group">
<label for="first-name" class="col-sm-2">Your First Name: </label>
<div class="col-sm-4">
<input type="text" class="form-control" id="first-name" placeholder="Please enter your first name.">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="last-name" class="col-sm-2">Your Last Name: </label>
<div class="col-sm-4">
<input type="text" class="form-control" id="last-name" placeholder="Please enter your last name.">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="email" class="col-sm-2">Your Email: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" placeholder="Please enter your email adresse.">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="phone" class="col-sm-2">Your Phone Number: </label>
<div class="col-sm-3">
<input type="text" class="form-control" id="phone" placeholder="Please enter your phone number.">
</div>
</div>
</div>
<button type="submit" class="col-sm-1 btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
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!
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label>
<input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="annualeave">Annual Leave :</label>
<input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
This answer is different from the above answer given by Rafa Romero.
I have added different style for these.
Here is the 2 ways you can use this .
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<br><h1 class="text-center">OR</h1><br>
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" >
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
You are using bootstrap class so do one thing use columns and give .col-sm-8 and .com-sm-4 respectively and check.
<div class="form-group">
<label for="annualeave" class="col-sm-8">Annual Leave :</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</div>
You can try with absolute position for the texfields and aligning both at the same distance from the right or left side
input{
position: absolute;
left: 275px
}
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="currentmonth">Total Work days in Current Month:</label>
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
<div class="row">
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
Your labels are too lengthy, I've just changed the structure with center align, is this what you need ?
.form-group {
width:50%;
float:left;
padding:0 15px;
}
.form-group input {
float:left;
}
.form-group label {
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group" >
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div> </div>
</div>
</div>
I have removed all your inline styles. There is no need for every field styling. You can do it with bootstrap classes.
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center"><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Sick / Emergency Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016):</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Month your name was added in Field Glass :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"></label>
<div class="col-sm-6 text-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
Add class form-inline to the form element
example:
<!DOCTYPE html>
<html lang="en">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
reference: http://www.w3schools.com/bootstrap/bootstrap_forms.asp
Remove the form-inline class from the form tag.
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>