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>
Related
I'm using Bootstrap 3 and I'm trying to align a button to the bottom of a column. The only way I can seem to accomplish this is by assigning an explicit height and using absolute positioning. Since I don't want all columns to behave this way, I'm wondering if there's something built into Bootstrap 3 that would allow me to do this?
.m-t {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group">
<div class="col-sm-3 m-t">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-sm-3 m-t">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-sm-2 m-t">
<label for="gender">Gender</label>
<select class="form-control">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-sm-2 m-t">
<label for="birthDate" class="control-label">Date of Birth</label>
<div class="input-group date" id="birthDateDiv">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
</div>
</div>
<div class="col-sm-2 m-t" style="display: flex; justify-content: flex-start; align-items: flex-end;">
<button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>
Basically need to add the missing label for the spacing. I've added also .form-control to the .btn as to allow for better display in mobile. Also consider hiding the dummy label on mobile using .hidden-sm or similar.
.m-t {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group">
<div class="col-sm-3 m-t">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-sm-3 m-t">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-sm-2 m-t">
<label for="gender">Gender</label>
<select class="form-control">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-sm-2 m-t">
<label for="birthDate" class="control-label">Birth</label>
<div class="input-group date" id="birthDateDiv">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
</div>
</div>
<div class="col-sm-2 m-t" style="">
<label for="dummy" class="control-label"> </label>
<button class="btn btn-primary form-control" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>
If you want to align button to bottom, you should apply css settings to form-group. In other words:
<div class="form-group" style="display: flex; align-items: flex-end;">
Bootstrap 3 is deprecated.
Solution: Adapt to Bootstrap 5.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group d-flex flex-wrap">
<div class="col-md-3 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-md-3 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-md-2 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="gender">Gender</label>
<select class="form-select">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-md-2 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="birthDate" class="control-label">Date of Birth</label>
<div class="input-group date" id="birthDateDiv">
<input id="dateofbirth" class="form-control" type="date" />
</div>
</div>
<div class="col-md-1 col-8 mt-3 px-2 ms-md-auto mx-auto" style="display: flex; justify-content: flex-start; align-items: flex-end;">
<button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>
I am using Bootstrap 5.2, and I have a form that includes the following form snippet:
<div class="row mb-2 align-items-center">
<div class="col-sm-4">
<label class="checkbox-inline" for="Credit_Pulled">Credit Pulled</label>
<input type="checkbox" class="form-check-inline" value="1" name="Credit_Pulled" id="Credit_Pulled">
</div>
<div class="col-sm-4">
<label class="checkbox-inline" for="Is_On_Terms">Approved For Terms</label>
<input type="checkbox" class="align-middle" value="true" name="Is_On_Terms" id="Is_On_Terms">
</div>
<div class="col-sm-4 form-floating">
<label for="Terms_Days">Terms Period</label>
<select class="form-select form-control d-flex" id="Terms_Days" name="Terms_Days">
<option value="0" selected>NONE</option>
<option value="30">NET-30</option>
<option value="60">NET-60</option>
<option value="90">NET-90</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-4 form-floating">
<label for="Credit_Limit">Approved Limit</label>
<input type="text" class="form-control d-flex" id="Credit_Limit" name="Credit_Limit">
</div>
</div>
<div class="row mb-2">
<div class="col-sm-12 w-100 form-floating">
<label for="Review_Notes">Review Notes</label>
<textarea class="form-control rounded" rows="8" id="Review_Notes" name="Review_Notes"></textarea>
</div>
</div>
When I view the form, this is what I get:
The problem is, the form labels and their contents overlap. Is there any way (even by adding custom CSS) to prevent this so that they display cleanly?
Bootstrap docs says that the <label> needs to come after the <input> https://getbootstrap.com/docs/5.0/forms/floating-labels/
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
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.