My form is way too large I want to make it scrollable without breaking line. How can I do this?
HTML:
<div id="item_group">
<div class="form-group form-md-line-input" style="">
<label>Item</label>
<select class="form-control " data-live-search="true" name="" id="" style="">
<option>Select Item</option>
<option value="23">Styler King 6 Card Holder (Set of 1, Khaki)</option>
</select>
</div>
<div class="form-group form-md-line-input" style="">
<label>Unit</label>
<select class="form-control " data-live-search="true" name="" id="" style="">
<option>Select Unit</option>
<option value="1">Piece</option>
<option value="2">Box</option>
<option value="4">Sub Box</option>
</select>
</div>
<div class="form-group form-md-line-input">
<input type="number" class="form-control" id="form_control_1" name="" style="" value="0">
<label for="form_control_1">Quantity</label>
</div>
<div class="form-group form-md-line-input">
<input type="number" class="form-control" id="form_control_1" name="" style="" value="0">
<label for="form_control_1">Sale Rate</label>
</div>
<div class="form-group form-md-line-input">
<input type="number" class="form-control" id="form_control_1" name="" style="" value="0">
<label for="form_control_1">Discount</label>
</div>
<div class="form-group form-md-line-input">
<input type="number" class="form-control" id="form_control_1" name="" style="" value="0">
<label for="form_control_1">CGST</label>
</div>
<div class="form-group form-md-line-input">
<input type="number" class="form-control" id="form_control_1" name="" style="" value="0">
<label for="form_control_1">SGST</label>
</div>
<div class="form-group form-md-line-input">
<input type="number" class="form-control" id="form_control_1" name="" style="" value="0">
<label for="form_control_1">IGST</label>
</div>
<div class="form-group form-md-line-input">
<input type="number" class="form-control" id="form_control_1" name="" style="" value="0">
<label for="form_control_1">Net Rate</label>
</div>
<div class="form-group form-md-line-input">
<input type="number" class="form-control" id="form_control_1" name="" style="" value="0">
<label for="form_control_1">Net Amount</label>
</div>
<input type="hidden" value="1" id="total_item">
<div class="col-md-12" style="padding-left: 0px; padding-right: 0px">
<div class="form-actions noborder">
<button class="btn blue" style="width: 100%;" onclick="addnewitem()"><i class="fa fa-plus"></i>Add New Item</button>
</div>
</div>
</div>
URL:
http://vsss.co.in/Admin/index.php/Sales
Inline Form Image
If you want horizontal scroll to you form, Then add this
overflow: scroll; height: 400px; to this class .portlet.light
As per your code,
.portlet.light {
padding: 12px 20px 15px;
background-color: #fff;
overflow: scroll;
height: 400px;
}
Related
I'm using Bootstrap in my app where I've got a multiple filters above my table. How to add some space between Date Min line and Payment Method line? Here is screenshot which better describes my issue:
Here is my code: https://jsfiddle.net/71tr3sqj/
<div class="row">
<div class="col text-end">
<form data-controller="transactions-form" data-transactions-form-target="form" data-turbo-frame="transactions" action="/transactions" accept-charset="UTF-8" method="get">
<label for="platform_payment_id">Order Id</label>
<input data-action="input->transactions-form#search" type="text" name="platform_payment_id" id="platform_payment_id">
<label for="min_amount">Min Amount</label>
<input data-action="input->transactions-form#search" type="text" name="min_amount" id="min_amount">
<label for="max_amount">Max Amount</label>
<input data-action="input->transactions-form#search" type="text" name="max_amount" id="max_amount">
<label for="payer_name">Payer Name</label>
<input data-action="input->transactions-form#search" type="text" name="payer_name" id="payer_name">
<label for="date_min">
<span class="translation_missing" title="translation missing: en.transactions.table.date_min">Date Min</span>
</label>
<input data-action="input->transactions-form#search" type="date" name="date_min" id="date_min">
<label for="date_max">
<span class="translation_missing" title="translation missing: en.transactions.table.date_max">Date Max</span>
</label>
<input data-action="input->transactions-form#search" type="date" name="date_max" id="date_max">
<label for="payment_method">Payment Method</label>
<select data-action="change->transactions-form#search" name="payment_method" id="payment_method">
<option value="">All Methods</option>
<option value="directdebit">Direct Debit</option>
<option value="creditcard">Credit Card</option>
</select>
<label for="status">Status</label>
<select data-action="change->transactions-form#search" name="status" id="status">
<option value="">All Statuses</option>
<option value="awaiting_authentication">Awaiting Authentication</option>
<option value="awaiting_clearance">Awaiting Clearance</option>
<option value="awaiting_user_input">Awaiting User Input</option>
<option value="fully_paid">Fully Paid</option>
<option value="payment_declined">Payment Declined</option>
<option value="user_canceled">User Canceled</option>
</select>
</form>
</div>
</div>
Wrap each elements with div and add mb-2
<form method="get">
<div class="mb-2">
<label for="">Order Id</label>
<input type="text" name="">
</div>
</form>
If you want to try use flex & gap, check this
https://jsfiddle.net/nw4qhbtk/
<form data-controller="transactions-form" data-transactions-form-target="form" data-turbo-frame="transactions" action="/transactions" accept-charset="UTF-8" method="get" style="display: flex; flex-wrap: wrap;gap: 10px;">
<div>
<label for="platform_payment_id">Order Id</label>
<input data-action="input->transactions-form#search" type="text" name="platform_payment_id" id="platform_payment_id">
</div>
<div>
<label for="min_amount">Min Amount</label>
<input data-action="input->transactions-form#search" type="text" name="min_amount" id="min_amount">
</div>
</form>
I have this form:
<div class="modal-body">
<form action="repository/add_new_task.php">
<div class="form-group">
<label for="street" class="col-form-label">Street</label>
<input type="text" class="form-control" id="street">
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone</label>
<input type="text" class="form-control" id="phone">
</div>
<div class="form-group">
<label for="date" class="col-form-label">Date</label>
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="date" data-target="#datetimepicker">
<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label for="price" class="col-form-label">Price</label>
<input type="text" class="form-control" id="price">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">Comment</label>
<textarea type="text" class="form-control" rows="3" id="comment"></textarea>
</div>
<div class="form-group">
<label for="job-type" class="col-form-label">Comment</label>
<select class="form-control" id="job-type">
<option value="0">Repair</option>
<option value="1">Multistory Pull In</option>
<option value="2">Multistory Weld</option>
<option value="3">Private Residence</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block" name="new-task-submit">Create task</button>
</form>
</div>
All I need to do is to make button disabled until all the fields (including datepicker and textarea) have values in them.
I tried following the answer in this post and while it worked I struggles to make it work for my datepicker and textarea. Can someone please help me figure this out
With just css you can use pointer events and make the button unclickable.
form:invalid [type="submit"] {
pointer-events: none;
border: 1px solid #999999;
background-color: #CCCCCC;
color: #666666;
}
<form>
<input type="text" required />
<input type="text" required />
<input type="text" required />
<input type="submit" />
You can use oninput and .disabled like so:
var field1 = document.getElementById("date");
var field2 = document.getElementById("phone");
var field3 = document.getElementById("price");
var field4 = document.getElementById("comment");
var field5 = document.getElementById("job-type");
var button = document.getElementById("btn");
function validate(){
if(!isEmpty(field1)&&!isEmpty(field2)&&!isEmpty(field3)&&!isEmpty(field4)&&!isEmpty(field5)){
btn.disabled=false;
}else{
btn.disabled=true;
}
}
function isEmpty(element){
if(element.value.length==0){
return true;
}else{
return false;
}
}
<div class="modal-body">
<form action="repository/add_new_task.php">
<div class="form-group">
<label for="street" class="col-form-label">Street</label>
<input type="text" class="form-control" id="street" oninput="validate()">
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone</label>
<input type="text" class="form-control" id="phone" oninput="validate()">
</div>
<div class="form-group">
<label for="date" class="col-form-label">Date</label>
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="date" data-target="#datetimepicker" oninput="validate()">
<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label for="price" class="col-form-label">Price</label>
<input type="text" class="form-control" id="price" oninput="validate()">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">Comment</label>
<textarea type="text" class="form-control" rows="3" id="comment" oninput="validate()"></textarea>
</div>
<div class="form-group">
<label for="job-type" class="col-form-label">Comment</label>
<select class="form-control" id="job-type" onchange="validate()">
<option value="0">Repair</option>
<option value="1">Multistory Pull In</option>
<option value="2">Multistory Weld</option>
<option value="3">Private Residence</option>
</select>
</div>
<button type="submit" id="btn" class="btn btn-primary btn-block" name="new-task-submit" disabled>Create task</button>
</form>
</div>
If the user has not entered any text into any of the fields, the button will be disabled automatically.
I am trying to do an in-line form for the 123 456 789
and price fields while keeping all first label is always taking col-md-1 space and in-line with other labels.
Here is the codepen http://codepen.io/anon/pen/pEYYEj
Here is the code
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" style="padding: 30px 20px 20px;
border: 1px solid #ddd;
background: #fff;">
<form data-toggle="validator" method="POST" enctype="multipart/form-data" action="/seller/new-listings" class="form-horizontal" novalidate="true">
<div class="form-group">
<label class="col-md-1 control-label">Name:</label>
<div class="col-md-11">
<input class="maxlength-handler form-control input-xlarge" data-error="Min 2 Letters" data-minlength="2" id="name" label="False" maxlength="56" name="name" required="" type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Description:</label>
<div class="col-md-11">
<textarea class="maxlength-handler form-control input-xlarge" data-error="Min 20 Letters" data-minlength="20" id="description" label="False" maxlength="300" name="description" required="" style="height:100px;"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">123:</label>
<div class="col-md-11">
<input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">456:</label>
<div class="col-md-11">
<input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">678:</label>
<div class="col-md-11">
<input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1g </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1g </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1/8 </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1/4 </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1/2 </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1 oz </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-1"></div>
<div class="form-group">
<br>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Stock:</label>
<div class="col-md-11">
<input class="form-control only-numbers" data-error="Stock required" data-minlength="1" id="stock" maxlength="3" name="stock" placeholder="Total Available Inventory for sale measured by Gram" required="" type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Published:</label>
<div class="col-md-11"><select class="form-control" id="published" name="published"><option value="published">Published</option><option value="not_published">Unpublished</option></select></div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">SKU:</label>
<div class="col-md-11"><input class="form-control" id="sku" name="sku" type="text" value=""></div>
</div>
</form>
</div>
Not quite sure if this is what you were looking for, but if you drop some of the form-groups and change the field divs to col-md-1 too, then you get the fields you want inlined...
http://codepen.io/anon/pen/pEYYdb
<div class="form-group">
<label class="col-md-1 control-label">123:</label>
<div class="col-md-1">
<input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
<label class="col-md-1 control-label">456:</label>
<div class="col-md-1">
<input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
<label class="col-md-1 control-label">678:</label>
<div class="col-md-1">
<input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
</div>
.inline-inp,.inline-inp .col-md-1,.inline-inp .col-md-11{
display:inline-block;
}
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10" style="padding: 30px 20px 20px;
border: 1px solid #ddd;
background: #fff;">
<form data-toggle="validator" method="POST" enctype="multipart/form-data" action="/seller/new-listings" class="form-horizontal" novalidate="true">
<div class="form-group">
<label class="col-md-1 control-label">Name:</label>
<div class="col-md-11">
<input class="maxlength-handler form-control input-xlarge" data-error="Min 2 Letters" data-minlength="2" id="name" label="False" maxlength="56" name="name" required="" type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Description:</label>
<div class="col-md-11">
<textarea class="maxlength-handler form-control input-xlarge" data-error="Min 20 Letters" data-minlength="20" id="description" label="False" maxlength="300" name="description" required="" style="height:100px;"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">123:</label>
<div class="col-md-11">
<input class="123-input form-control" id="123" maxlength="4" name="123" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">456:</label>
<div class="col-md-11">
<input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">678:</label>
<div class="col-md-11">
<input class="cbn-input form-control" id="" maxlength="4" name="" style=" width:80px; display:inline-block; " type="text" value="0">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1g </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1g </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1/8 </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1/4 </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1/2 </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group inline-inp">
<label class="col-md-1 control-label">Price:</label>
<div class="col-md-11">
<label class="control-label" style="padding-right:5px;">1 oz </label>
<input class="cbd-input form-control" data-error="Price required" data-minlength="1" id="price" maxlength="8" name="price" required="" style=" width:80px; display:inline-block; " type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-md-1"></div>
<div class="form-group">
<br>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Stock:</label>
<div class="col-md-11">
<input class="form-control only-numbers" data-error="Stock required" data-minlength="1" id="stock" maxlength="3" name="stock" placeholder="Total Available Inventory for sale measured by Gram" required="" type="text" value="">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">Published:</label>
<div class="col-md-11"><select class="form-control" id="published" name="published"><option value="published">Published</option><option value="not_published">Unpublished</option></select></div>
</div>
<div class="form-group">
<label class="col-md-1 control-label">SKU:</label>
<div class="col-md-11"><input class="form-control" id="sku" name="sku" type="text" value=""></div>
</div>
</form>
</div>
I would like the fields "Name" and "Last Name" to be on the same row.
I've found some solutions such as this one here in stackoverflow, but the problem is that I want the labels positioned above the fields to be side by side too.
How is that possible?
Here's the form code:
<form>
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
</div>
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
</div>
<div class="form-group">
<label for="inputTitle">Title:</label>
<input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="leo#saasmetrics.co">
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Notifications:</label>
<select class="form-control" id="selectEmailNotifications">
<option>None</option>
<option>Daily</option>
<option>Weekly</option>
<option selected>Monthly</option>
</select>
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Status:</label>
<select class="form-control" id="selectEmailNotifications">
<option selected>Active</option>
<option>Inactive</option>
</select>
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Profile:</label>
<select class="form-control" id="selectEmailNotifications">
<option selected>Administrator</option>
<option>User</option>
</select>
</div>
</form>
Something like this should get you started.
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Leandro">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Faria">
</div>
</div>
</div>
Yes, the top answer is true, but this is another solution.You can use inline bootstrap forms like this:
<div class="form-inline">
<div class="form-group" style="width: 50%">
<label for="input1">Name</label>
<input type="text" class="form-control" id="input1" placeholder="David">
</div>
<div class="form-group" style="width: 49%">
<label for="input2">Last Name</label>
<input type="text" class="form-control" id="input2" placeholder="Tanner">
</div>
</div>
Read the bootstrap document
I don't understand why this is not working. I'm trying to get these two form elements side by side. Also I would like to be able to have some elements side by side and some arranged below in the same form (as in future elements will be below these two). I left off the role="form" since I'm using Struts 1 and this breaks the <html:form> tag.
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="form-group">
<div>
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
<div class="form-group">
<div>
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
JSFiddle
You have to put your controls into an input-group:
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="input-group">
<div class="form-group">
<div>
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
<div class="form-group">
<div>
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
</div>
</form>
http://jsfiddle.net/3h3NB/3/
EDIT:
Or you can try using grids:
<form>
<div class="container">
<div class="row">
<div class="col-xs-1">
<label for="startDate">from</lable>
</div>
<div class="col-xs-3">
<input type="text" name="startDate" value="" readonly="readonly" id="startDate"class="datepicker form-control">
</div>
<div class="col-xs-1">
<label for="endDate">to</lable>
</div>
<div class="col-xs-3">
<input type="text" name="endDate" value="" readonly="readonly" id="startDate" class="datepicker form-control">
</div>
</div>
</div>
</form>
http://jsfiddle.net/3h3NB/76/
You can do this on the HTML
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="form-group">
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control"/>
</div>
<div class="form-group">
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control"/>
</div>
and do this on the CSS
.form-group{
float:Left;
}
JSfiddle link
For Bootstrap3 you can do something like this
<form name="someForm" method="post" action="/someAction.do" class="form-horizontal">
<div class="form-group">
<div class="col-xs-20">
<div cass="form-inline">
<label for="startDate" class="col-xs-2 control-label">From</label>
<div class="col-xs-2">
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="form-control" placeholder="From">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-20">
<div class="form-inline">
<label for="endDate" class="col-xs-2 control-label">To</label>
<div class="col-xs-2">
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="form-control" placeholder="To">
</div>
</div>
</div>
</div>
</form>
See Online example
You can find more examples at Twitter Bootstrap Forms tutorial.