How do I adjust the bootstrap input group width and still have it be responsive. For example I only want the quantity input field to take x%(be much smaller) than description field. Also how do I wrap each input field on mobile? Thanks in advance, sorry I am a Noob.
<div class="container">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="panel panel-danger">
<div class="panel-heading text-center"><strong>Store Transfer</strong></div>
<div class="panel-body">
<div class="col-lg-12">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">Description</span>
<input type="text" class="form-control input-sm" placeholder="Item Description">
<span class="input-group-addon">Quantity</span>
<input type="text" class="form-control input-sm" placeholder="Quantity">
<span class="input-group-addon">Cost</span>
<input type="text" class="form-control input-sm" placeholder="Cost">
<span class="input-group-addon">Total $0.00</span>
</div>
</div>
</div>
<div class="col-lg-2"></div>
<div class="col-lg-8">
<div class="form-group">
<div class="input-group"><span class="input-group-addon">Transfer From:</span>
<select class="form-control form-control-sm">
<option value="store" disabled="" selected="" class="">Select Store</option>
<option value="Richfield" class="">Richfield</option>
<option value="Eagan" class="">Eagan</option>
</select>
<span class="input-group-addon">Transfer To:</span>
<select class="form-control">
<option value="store" disabled="" selected="" class="">Select Store</option>
<option value="Richfield" class="">Richfield</option>
<option value="Eagan" class="">Eagan</option>
</select>
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Submit</button>
</span>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
BootPly Here
Related
I have a table. i want to add a row just above the table header. i have 8 divs to add in the row. I have following codes.
<div class = "container">
<div class="row" style="margin-top: 8px">
<div class = "col-sm-1">
<div class="dateselect_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</label>
</div>
</div>
<div class = "col-sm-1">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>S
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off">L
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter a">
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter b" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter c" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="search" class="form-control form-control-sm" placeholder="Search" aria-controls="dt_basic">
</label>
</div>
</div>
<div class = "col-sm-1">
<div class="dt_basic_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="xx">xx</option>
</select>
</label>
</div>
</div>
<div class = "col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="search" class="form-control form-control-sm" placeholder="calendar" aria-controls="dt_basic">
</label>
</div>
</div>
</div>
</div>
My problem is first 3 divs here have margin between them and last 3 divs have margins as well. But 2 divs in the middle have no margin and they are overlapped. Moreover, when i try to reduce the size of 'search' and 'calender' divs, they break into icon and field and take the space of the row below. Can anyone please tell me what went wrong here ? I just need moderate space between the divs in one row.
I wonder if this is what you mean by needing to add a header. (I did work with Bootstrap 4). Perhaps you could upload an image of what you're looking for, so that it's clearer :)
.search-custom {
width: 80%;
}
.calendar-custom {
width: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 text-center" style="border:1px solid;">Header</div>
</row>
<div class="row" style="margin-top: 8px">
<div class="col-sm-1">
<div class="dateselect_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</label>
</div>
</div>
<div class="col-sm-1">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>S
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off">L
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter a">
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter b" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-1">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control" placeholder="Filter c" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="search" class="form-control form-control-sm search-custom" placeholder="Search" aria-controls="dt_basic">
</label>
</div>
</div>
<div class="col-sm-1">
<div class="dt_basic_filter" id="dt_basic_length">
<label>
<select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
<option value="x">x</option>
<option value="y">y</option>
<option value="z">z</option>
<option value="xx">xx</option>
</select>
</label>
</div>
</div>
<div class="col-sm-3">
<div id="dt_basic_filter" class="dataTables_filter">
<label>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="search" class="form-control form-control-sm calendar-custom" placeholder="calendar" aria-controls="dt_basic">
</label>
</div>
</div>
</div>
</div>
Hope it helps!
I have this form:
<form style="margin-top:20px">
<div class="row form-group">
<div class="col-lg-3">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-lg-3">
<label for="exampleInputEmail1">Billing Amount</label>
<div class="input-group">
<div class="input-group-addon" id="BillingAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-lg-3">
<label for="exampleInputEmail1">Original Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
<select class="form-control" id="OriginalCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
<div class="col-lg-3">
<label for="exampleInputEmail1">Billing Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="BillingCurrencyAddon">$</div>
<select class="form-control" id="BillingCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
</div></form>
It looks like this:
I want the whole form in the center, how to? Do I need to center each row separately? And another question, I want for example, the "Supllier Account" field, to be in the same lenght of the two fields above, how to?
This is basically a duplicate of a question that's already been asked many times..
Center a column using Twitter Bootstrap 3
To specifically center your form you can use column offsets like this, but there are several different methods for centering:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-offset-3 col-sm-10 col-sm-offset-1">
<form style="margin-top:20px">
<div class="row form-group">
<div class="col-md-4">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-md-4">
<label for="exampleInputEmail1">Billing Amount</label>
<div class="input-group">
<div class="input-group-addon" id="BillingAmountAddon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label for="exampleInputEmail1">Original Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
<select class="form-control" id="OriginalCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
<div class="col-md-4">
<label for="exampleInputEmail1">Billing Currency Code</label>
<div class="input-group">
<div class="input-group-addon" id="BillingCurrencyAddon">$</div>
<select class="form-control" id="BillingCurrencySelect">
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="£">GBP</option>
<option value="₪">ILS</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
http://www.codeply.com/go/sRbuCfloDX
When i want to do it, margin: 0 auto; works quite fine
I am facing long gap before fields. The first row is fine but the second row gives a long gap. Also all rows should look like the first row.Thanks
See the image to get the real view of the problem
Here is the code.
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<form action="http://localhost/CI/Products/manageIpo" class="form-horizontal" role="form" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<input type="hidden" name="dataid" value="">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> POD Request Number </label>
<div class="col-lg-12">
<input type="text" name="ipo_request_no" value="" id="ipo_request_no" class="col-lg-10" placeholder="IPO Request Number" />
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-sm-12" for="form-field-1"> DN Number </label>
<div class="col-sm-12">
<input type="text" name="dn_number" value="" id="dn_number" class="col-lg-10" placeholder="DN Number" />
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Job Type</label>
<div class="col-lg-12">
<select id="ipo_type" class="col-lg-10"
name="ipo_type">
<option value="3">Transportation</option>
<option value="4">Reverse Transportation</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Warehouse</label>
<div class="col-lg-12">
<select id="warehouse_id" class="col-lg-10"
name="warehouse_id">
<option value="1">Wah</option>
<option value="2">Warid</option>
<option value="3">Zong 1</option>
<option value="4">Test Approved</option>
<option value="5">Mobilnk</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Vendor</label>
<div class="col-lg-12">
<select id="supplier_id" class="col-lg-10"
name="supplier_id">
<option value="1">Spine engineering</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Project</label>
<div class="col-lg-12">
<select id="project_id_ipo" class="col-lg-
10" name="project_id">
<option value="1">CM Pak Wireless Optimization</option>
<option value="2">Mobilink Mega 2014 </option>
<option value="3">Mobilink Mega 2015 </option>
<option value="4">Mobilink Mega 2013 </option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Project Externel Code </label>
<div class="col-lg-12">
<input type="text" name="project_externel_code" value="" id="project_externel_code" class="col-lg-10" placeholder="Project Externel Code" disabled="disabled" />
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> RSD Date </label>
<div class="">
<div class="col-lg-12">
<div class="input-group">
<input class="form-control date-picker col-lg-10" name="rsd" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" />
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> RAD Date </label>
<div class="">
<div class="col-lg-12">
<div class="input-group col-lg-10">
<input class="form-control date-picker" name="rad" id="id-date-picker-2" type="text" data-date-format="dd-mm-yyyy" />
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Site</label>
<div class="col-lg-12">
<select id="site_id" class="col-lg-10"
name="site_id">
<option value="0">Select Site</option>
<option value="1">Site 2</option>
<option value="2">Site 1</option>
<option value="3">Site 3</option>
<option value="4">Site 4</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Region</label>
<div class="col-lg-12">
<select id="region_id" class="col-lg-10"
name="region_id">
<option value="1">South</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">West</option>
</select>
</div>
</div>
<div class="row col-lg-12">
<div class="form-group col-xs-6">
<label class="col-lg-12 center" for="form-field-2">POD Attachment</label>
<div class="col-lg-12">
<input multiple="" type="file" name="other_attach" id="id-input-file-5" />
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-lg-12 center" for="form-field-1">Signed Attachment</label>
<div class="col-lg-12">
<input multiple="" type="file" name="signed_attach" id="id-input-file-4" />
</div>
</div>
</div>
<div class="modal-footer col-lg-12">
<button type="submit" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Save </button>
</div>
</form> </div>
</div>
You should include a div with class="row" to set up those elements in a row,
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Please refer Grid system in Bootstrap for more info.
Try out the below code,
<form action="http://localhost/CI/Products/manageIpo" class="form-horizontal" role="form" enctype="multipart/form-data"
method="post" accept-charset="utf-8">
<input type="hidden" name="dataid" value="">
<div class="row">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> POD Request Number </label>
<div class="col-lg-12">
<input type="text" name="ipo_request_no" value="" id="ipo_request_no" class="col-lg-10"
placeholder="IPO Request Number">
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-sm-12" for="form-field-1"> DN Number </label>
<div class="col-sm-12">
<input type="text" name="dn_number" value="" id="dn_number" class="col-lg-10" placeholder="DN Number">
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Job Type</label>
<div class="col-lg-12">
<select id="ipo_type" class="col-lg-10" name="ipo_type">
<option value="3">Transportation</option>
<option value="4">Reverse Transportation</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Warehouse</label>
<div class="col-lg-12">
<select id="warehouse_id" class="col-lg-10" name="warehouse_id">
<option value="1">Wah</option>
<option value="2">Warid</option>
<option value="3">Zong 1</option>
<option value="4">Test Approved</option>
<option value="5">Mobilnk</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Vendor</label>
<div class="col-lg-12">
<select id="supplier_id" class="col-lg-10" name="supplier_id">
<option value="1">Spine engineering</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Project</label>
<div class="col-lg-12">
<select id="project_id_ipo" class="col-lg-
10" name="project_id">
<option value="1">CM Pak Wireless Optimization</option>
<option value="2">Mobilink Mega 2014</option>
<option value="3">Mobilink Mega 2015</option>
<option value="4">Mobilink Mega 2013</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Project Externel Code </label>
<div class="col-lg-12">
<input type="text" name="project_externel_code" value="" id="project_externel_code" class="col-lg-10"
placeholder="Project Externel Code" disabled="disabled">
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> RSD Date </label>
<div class="">
<div class="col-lg-12">
<div class="input-group">
<input class="form-control date-picker col-lg-10" name="rsd" id="id-date-picker-1" type="text"
data-date-format="dd-mm-yyyy">
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
</div>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> RAD Date </label>
<div class="">
<div class="col-lg-12">
<div class="input-group col-lg-10">
<input class="form-control date-picker" name="rad" id="id-date-picker-2" type="text"
data-date-format="dd-mm-yyyy">
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Site</label>
<div class="col-lg-12">
<select id="site_id" class="col-lg-10" name="site_id">
<option value="0">Select Site</option>
<option value="1">Site 2</option>
<option value="2">Site 1</option>
<option value="3">Site 3</option>
<option value="4">Site 4</option>
</select>
</div>
</div>
<div class="form-group col-lg-4">
<label class="col-lg-12" for="form-field-1"> Region</label>
<div class="col-lg-12">
<select id="region_id" class="col-lg-10" name="region_id">
<option value="1">South</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">West</option>
</select>
</div>
</div>
</div>
<div class="row col-lg-12">
<div class="form-group col-xs-6">
<label class="col-lg-12 center" for="form-field-2">POD Attachment</label>
<div class="col-lg-12">
<input multiple="" type="file" name="other_attach" id="id-input-file-5">
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-lg-12 center" for="form-field-1">Signed Attachment</label>
<div class="col-lg-12">
<input multiple="" type="file" name="signed_attach" id="id-input-file-4">
</div>
</div>
</div>
<div class="modal-footer col-lg-12">
<button type="submit" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Save
</button>
</div>
</form>
First two blocks having height is more than a last block that is select box.
so you missed putting class="form-control" in select boxes.
Could you lease tell me how to prevent the brands select box from being hidden behind the date. I gave minimum width to dates because I do not want them to collapse more than the minimum width.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
<form accept-charset="UTF-8" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="form-group credits-daterange">
<label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
<div class="col-sm-10 col-xs-12">
<div class="input-group input-daterange" data-date-format="yyyy-mm-dd" style="min-width: 236px;">
<input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
<input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="form-group">
<select class="form-control" id="brand" name="brand">
<option value="0">All Brands</option>
<option value="9618">Brand 1</option>
<option value="10268">Brand 2</option>
<option value="10232">Brand 3</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12">
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Created">status 1</option>
<option value="Downloaded">Status 2</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-12 pull-right">
<input class="hidden" id="search_txt" name="search_txt" type="text" value="">
<input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
</div>
</div>
</form>
</div>
</body>
</html>
Demo
All suggestions are welcome.
Thanks
The overlap is due to style="min-width: 236px;
If you remove it, you can this that the issue is gone away.
Here is a fiddle : http://www.bootply.com/KFgIJ6z5ld
Your code without your custom style :
<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
<form accept-charset="UTF-8" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="form-group credits-daterange">
<label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
<div class="col-sm-10 col-xs-12">
<div class="input-group input-daterange" data-date-format="yyyy-mm-dd">
<input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
<input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="form-group">
<select class="form-control" id="brand" name="brand">
<option value="0">All Brands</option>
<option value="9618">Brand 1</option>
<option value="10268">Brand 2</option>
<option value="10232">Brand 3</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12">
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Created">status 1</option>
<option value="Downloaded">Status 2</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-12 pull-right">
<input class="hidden" id="search_txt" name="search_txt" type="text" value="">
<input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
</div>
</div>
</form>
</div>
One other way is to make bigger your cells :
Bootply : http://www.bootply.com/KzRD6fb0Pw
Code :
<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
<form accept-charset="UTF-8" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="form-group credits-daterange">
<label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
<div class="col-sm-10 col-xs-12">
<div class="input-group input-daterange" data-date-format="yyyy-mm-dd">
<input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
<input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-2 col-xs-12">
<div class="form-group">
<select class="form-control" id="brand" name="brand">
<option value="0">All Brands</option>
<option value="9618">Brand 1</option>
<option value="10268">Brand 2</option>
<option value="10232">Brand 3</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-2 col-xs-12">
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Created">status 1</option>
<option value="Downloaded">Status 2</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-2 pull-right">
<input class="hidden" id="search_txt" name="search_txt" type="text" value="">
<input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
</div>
</div>
</form>
</div>
I want to place two select options side by side in my form. I am using Bootstrap 3 but I can't place them with proper alignment.
Here is my HTML code:
<form role="form">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block te" >Prices & Availability</button>
</form>
Use this
jsfiddle http://jsfiddle.net/harshdand/e0fc1ucq/
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</div>
class form-control in bootstrap has the display value of block. give it the class d-inline-block
<select class="form-control d-inline-block">