How to align a Bootstrap form's input fields and labels?
4
I am working on bootstrap-4 forms in which I have several input fields and labels. I have successfully created it, but want to add some features to it so that it looks great UI-wise and is user friendly.
Working Snippet
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>The output is fine on small devices, but on large devices I am facing the following issues:
- I am aligning 4 label and input field in one row, but the input fields are looking very small of width on the UI, because there is so much of space between label and input field
- the header which is "Company id and name" I want to offset them so that they appear in the center on large screens
- I have some drop-downs with some input fields; the input fields which don't have drop-downs I want to take full width, as they do on small devices
Changes I am trying to make are
I want input fields with drop-down not as only drop-down
html css css3 bootstrap-4
asked Jan 1 at 7:09
dheeraj kumardheeraj kumar
38413
|
show 3 more comments
4
I am working on bootstrap-4 forms in which I have several input fields and labels. I have successfully created it, but want to add some features to it so that it looks great UI-wise and is user friendly.
Working Snippet
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>The output is fine on small devices, but on large devices I am facing the following issues:
- I am aligning 4 label and input field in one row, but the input fields are looking very small of width on the UI, because there is so much of space between label and input field
- the header which is "Company id and name" I want to offset them so that they appear in the center on large screens
- I have some drop-downs with some input fields; the input fields which don't have drop-downs I want to take full width, as they do on small devices
Changes I am trying to make are
I want input fields with drop-down not as only drop-down
html css css3 bootstrap-4
asked Jan 1 at 7:09
dheeraj kumardheeraj kumar
38413
for dropdown you can use this getbootstrap.com/docs/4.1/components/input-group/…
– Nisharg Shah
Jan 1 at 7:18
@NishargShah i am using the same,i think
– dheeraj kumar
Jan 1 at 7:41
i don't seeinput-group-appendclass
– Nisharg Shah
Jan 1 at 10:20
@NishargShah can you help me out with some code? please
– dheeraj kumar
Jan 2 at 10:50
why dont use top aligned label. it will give you good view in respect of left aligned
– Kandy
Feb 5 at 12:12
|
show 3 more comments
4
4
4
3
I am working on bootstrap-4 forms in which I have several input fields and labels. I have successfully created it, but want to add some features to it so that it looks great UI-wise and is user friendly.
Working Snippet
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>The output is fine on small devices, but on large devices I am facing the following issues:
- I am aligning 4 label and input field in one row, but the input fields are looking very small of width on the UI, because there is so much of space between label and input field
- the header which is "Company id and name" I want to offset them so that they appear in the center on large screens
- I have some drop-downs with some input fields; the input fields which don't have drop-downs I want to take full width, as they do on small devices
Changes I am trying to make are
I want input fields with drop-down not as only drop-down
html css css3 bootstrap-4
asked Jan 1 at 7:09
dheeraj kumardheeraj kumar
38413
I am working on bootstrap-4 forms in which I have several input fields and labels. I have successfully created it, but want to add some features to it so that it looks great UI-wise and is user friendly.
Working Snippet
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>The output is fine on small devices, but on large devices I am facing the following issues:
- I am aligning 4 label and input field in one row, but the input fields are looking very small of width on the UI, because there is so much of space between label and input field
- the header which is "Company id and name" I want to offset them so that they appear in the center on large screens
- I have some drop-downs with some input fields; the input fields which don't have drop-downs I want to take full width, as they do on small devices
Changes I am trying to make are
I want input fields with drop-down not as only drop-down
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>html css css3 bootstrap-4
html css css3 bootstrap-4
asked Jan 1 at 7:09
dheeraj kumardheeraj kumar
38413
asked Jan 1 at 7:09
dheeraj kumardheeraj kumar
38413
edited Feb 7 at 5:14
dheeraj kumar
asked Jan 1 at 7:09
dheeraj kumardheeraj kumar
38413
asked Jan 1 at 7:09
dheeraj kumardheeraj kumar
38413
asked Jan 1 at 7:09
dheeraj kumardheeraj kumar
38413
38413
for dropdown you can use this getbootstrap.com/docs/4.1/components/input-group/…
– Nisharg Shah
Jan 1 at 7:18
@NishargShah i am using the same,i think
– dheeraj kumar
Jan 1 at 7:41
i don't seeinput-group-appendclass
– Nisharg Shah
Jan 1 at 10:20
@NishargShah can you help me out with some code? please
– dheeraj kumar
Jan 2 at 10:50
why dont use top aligned label. it will give you good view in respect of left aligned
– Kandy
Feb 5 at 12:12
|
show 3 more comments
for dropdown you can use this getbootstrap.com/docs/4.1/components/input-group/…
– Nisharg Shah
Jan 1 at 7:18
@NishargShah i am using the same,i think
– dheeraj kumar
Jan 1 at 7:41
i don't seeinput-group-appendclass
– Nisharg Shah
Jan 1 at 10:20
@NishargShah can you help me out with some code? please
– dheeraj kumar
Jan 2 at 10:50
why dont use top aligned label. it will give you good view in respect of left aligned
– Kandy
Feb 5 at 12:12
for dropdown you can use this getbootstrap.com/docs/4.1/components/input-group/…
– Nisharg Shah
Jan 1 at 7:18
for dropdown you can use this getbootstrap.com/docs/4.1/components/input-group/…
– Nisharg Shah
Jan 1 at 7:18
@NishargShah i am using the same,i think
– dheeraj kumar
Jan 1 at 7:41
@NishargShah i am using the same,i think
– dheeraj kumar
Jan 1 at 7:41
i don't see
input-group-append class– Nisharg Shah
Jan 1 at 10:20
i don't see
input-group-append class– Nisharg Shah
Jan 1 at 10:20
@NishargShah can you help me out with some code? please
– dheeraj kumar
Jan 2 at 10:50
@NishargShah can you help me out with some code? please
– dheeraj kumar
Jan 2 at 10:50
why dont use top aligned label. it will give you good view in respect of left aligned
– Kandy
Feb 5 at 12:12
why dont use top aligned label. it will give you good view in respect of left aligned
– Kandy
Feb 5 at 12:12
|
show 3 more comments
4 Answers
4
active
oldest
votes
2
+100
You can do something like this:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
.container {
margin: 5px auto;
padding: 5px;
color: #17A2B8;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
text-align: center;
}
.btn, .btn-outline-secondary {
border-color: #17A2B8;
background-color: #17A2B8;
color: #ffffff;
}
.btn:hover, .btn-outline-secondary:hover {
background-color: #ffffff;
color: #17A2B8;
border-color: #17A2B8;
}
.show > .btn-outline-secondary.dropdown-toggle {
color: #ffffff;
background-color: #17A2B8;
border-color: #17A2B8;
}
</style>
<div class="container">
<h1>Form</h1>
<form>
<div class="form-row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyId">Company ID</label>
<input type="text" class="form-control" id="companyId">
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName">
</div>
</div>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemName">Item Name</label>
<input type="text" class="form-control" id="itemName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandName">Brand Name</label>
<input type="text" class="form-control" id="brandName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryCode">Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Category Code 1</a>
<a class="dropdown-item" href="#">Category Code 2</a>
<a class="dropdown-item" href="#">Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryName">Category Name</label>
<input type="text" class="form-control" id="categoryName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryCode">Sub Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Sub Category Code 1</a>
<a class="dropdown-item" href="#">Sub Category Code 2</a>
<a class="dropdown-item" href="#">Sub Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryName">Sub Category Name</label>
<input type="text" class="form-control" id="subCategoryName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitCode">Unit Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Unit Code 1</a>
<a class="dropdown-item" href="#">Unit Code 2</a>
<a class="dropdown-item" href="#">Unit Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitName">Unit Name</label>
<input type="text" class="form-control" id="unitName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierCode">Supplier Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Supplier Code 1</a>
<a class="dropdown-item" href="#">Supplier Code 2</a>
<a class="dropdown-item" href="#">Supplier Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierName">Supplier Name</label>
<input type="text" class="form-control" id="supplierName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstCode">GST Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">GST Code 1</a>
<a class="dropdown-item" href="#">GST Code 2</a>
<a class="dropdown-item" href="#">GST Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstPercentage">GST Percentage</label>
<input type="text" class="form-control" id="gstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sgstPercentage">SGST Percentage</label>
<input type="text" class="form-control" id="sgstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="cgstPercentage">CGST Percentage</label>
<input type="text" class="form-control" id="cgstPercentage">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="costPrice">Cost Price</label>
<input type="text" class="form-control" id="costPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sellingPrice">Selling Price</label>
<input type="text" class="form-control" id="sellingPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="mrp">MRP</label>
<input type="text" class="form-control" id="mrp">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="boxWeight">Box Weight</label>
<input type="text" class="form-control" id="boxWeight">
</div>
</div>
<hr>
<div class="col-auto my-1">
<button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
<button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
<button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
</div>
<hr>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>and if you want you can add placeholders.
answered Jan 1 at 9:40
Partho63Partho63
1,6401722
hey man the select option you have made it doesn't have input field ...i want a input field with drop-down by its side..the select option you have made, its only a select option which is not input field...sorry that time i just saw the result i haven't checked carefully,please edit if you can,as you can see in my code there is input field first then a drop-down.
– dheeraj kumar
Jan 1 at 13:40
okok i was just stuck that's why i have asked..i ll do that by my own..sorry for that
– dheeraj kumar
Jan 2 at 12:26
@dheerajkumar Hey, I have updated my answer. Check the updated version if you like it !
– Partho63
Feb 7 at 6:39
add a comment |
0
In order to make the inputs bigger I changed the columns sizes. All of the col-lg-2 I changed to col-lg-1 and all the col-lg-4 I changed to col-lg-5 and the inputs are looking much more full on wider displays. Here's a codepen with it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container" id="center">
<div class="input-group ">
<label class="col-lg-1 text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-1 text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-5 4 form-control ">
<label for="usr" class="col-lg-1 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
<input type="text" class="col-lg-3 3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
answered Feb 6 at 1:29
Drew GilliesDrew Gillies
1315
some input fields are displaying bigger in size..i also have tried but faced this kind of issues
– dheeraj kumar
Feb 6 at 4:58
use can usealign-items: flex-startthat will solve height issue for input.
– Chilll007
Feb 7 at 4:44
add a comment |
0
I answered a similar question before. As you can see, setting a specific col width on doesn't work well for all of the labels since they're different widths.
There are several different workarounds for this including CSS grid and table-cell width, but IMO the easiest solution is to use display:table-cell and a media query so that it's only applied above a specific screen width. You'll also need to clean up the markup using col-form-label and correctly structured input groups.
<div class="form-row align-items-center">
<label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
<div class="input-group col-lg col-md-4 align-items-start py-2">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
...
</div>
Demo: https://www.codeply.com/go/GJ0Puh9pWd
Note: Don't use row and container-fluid together in the same element.
answered Feb 6 at 13:44
ZimZim
190k48398385
add a comment |
0
As I discussed in comment section about top aligned, I have done some changes in your code for first row and others are commented if you like than proceed further.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div> -->
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>Same code on browser its giving perfect text box for me on small screen.
answered Feb 6 at 12:03
KandyKandy
338313
hey look input field size is greater then the input having dropdown
– dheeraj kumar
Feb 6 at 12:49
look i have uploaded a image on small device display
– dheeraj kumar
Feb 7 at 5:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993684%2fhow-to-align-a-bootstrap-forms-input-fields-and-labels%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
+100
You can do something like this:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
.container {
margin: 5px auto;
padding: 5px;
color: #17A2B8;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
text-align: center;
}
.btn, .btn-outline-secondary {
border-color: #17A2B8;
background-color: #17A2B8;
color: #ffffff;
}
.btn:hover, .btn-outline-secondary:hover {
background-color: #ffffff;
color: #17A2B8;
border-color: #17A2B8;
}
.show > .btn-outline-secondary.dropdown-toggle {
color: #ffffff;
background-color: #17A2B8;
border-color: #17A2B8;
}
</style>
<div class="container">
<h1>Form</h1>
<form>
<div class="form-row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyId">Company ID</label>
<input type="text" class="form-control" id="companyId">
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName">
</div>
</div>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemName">Item Name</label>
<input type="text" class="form-control" id="itemName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandName">Brand Name</label>
<input type="text" class="form-control" id="brandName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryCode">Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Category Code 1</a>
<a class="dropdown-item" href="#">Category Code 2</a>
<a class="dropdown-item" href="#">Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryName">Category Name</label>
<input type="text" class="form-control" id="categoryName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryCode">Sub Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Sub Category Code 1</a>
<a class="dropdown-item" href="#">Sub Category Code 2</a>
<a class="dropdown-item" href="#">Sub Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryName">Sub Category Name</label>
<input type="text" class="form-control" id="subCategoryName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitCode">Unit Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Unit Code 1</a>
<a class="dropdown-item" href="#">Unit Code 2</a>
<a class="dropdown-item" href="#">Unit Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitName">Unit Name</label>
<input type="text" class="form-control" id="unitName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierCode">Supplier Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Supplier Code 1</a>
<a class="dropdown-item" href="#">Supplier Code 2</a>
<a class="dropdown-item" href="#">Supplier Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierName">Supplier Name</label>
<input type="text" class="form-control" id="supplierName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstCode">GST Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">GST Code 1</a>
<a class="dropdown-item" href="#">GST Code 2</a>
<a class="dropdown-item" href="#">GST Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstPercentage">GST Percentage</label>
<input type="text" class="form-control" id="gstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sgstPercentage">SGST Percentage</label>
<input type="text" class="form-control" id="sgstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="cgstPercentage">CGST Percentage</label>
<input type="text" class="form-control" id="cgstPercentage">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="costPrice">Cost Price</label>
<input type="text" class="form-control" id="costPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sellingPrice">Selling Price</label>
<input type="text" class="form-control" id="sellingPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="mrp">MRP</label>
<input type="text" class="form-control" id="mrp">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="boxWeight">Box Weight</label>
<input type="text" class="form-control" id="boxWeight">
</div>
</div>
<hr>
<div class="col-auto my-1">
<button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
<button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
<button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
</div>
<hr>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>and if you want you can add placeholders.
answered Jan 1 at 9:40
Partho63Partho63
1,6401722
hey man the select option you have made it doesn't have input field ...i want a input field with drop-down by its side..the select option you have made, its only a select option which is not input field...sorry that time i just saw the result i haven't checked carefully,please edit if you can,as you can see in my code there is input field first then a drop-down.
– dheeraj kumar
Jan 1 at 13:40
okok i was just stuck that's why i have asked..i ll do that by my own..sorry for that
– dheeraj kumar
Jan 2 at 12:26
@dheerajkumar Hey, I have updated my answer. Check the updated version if you like it !
– Partho63
Feb 7 at 6:39
add a comment |
2
+100
You can do something like this:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
.container {
margin: 5px auto;
padding: 5px;
color: #17A2B8;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
text-align: center;
}
.btn, .btn-outline-secondary {
border-color: #17A2B8;
background-color: #17A2B8;
color: #ffffff;
}
.btn:hover, .btn-outline-secondary:hover {
background-color: #ffffff;
color: #17A2B8;
border-color: #17A2B8;
}
.show > .btn-outline-secondary.dropdown-toggle {
color: #ffffff;
background-color: #17A2B8;
border-color: #17A2B8;
}
</style>
<div class="container">
<h1>Form</h1>
<form>
<div class="form-row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyId">Company ID</label>
<input type="text" class="form-control" id="companyId">
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName">
</div>
</div>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemName">Item Name</label>
<input type="text" class="form-control" id="itemName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandName">Brand Name</label>
<input type="text" class="form-control" id="brandName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryCode">Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Category Code 1</a>
<a class="dropdown-item" href="#">Category Code 2</a>
<a class="dropdown-item" href="#">Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryName">Category Name</label>
<input type="text" class="form-control" id="categoryName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryCode">Sub Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Sub Category Code 1</a>
<a class="dropdown-item" href="#">Sub Category Code 2</a>
<a class="dropdown-item" href="#">Sub Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryName">Sub Category Name</label>
<input type="text" class="form-control" id="subCategoryName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitCode">Unit Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Unit Code 1</a>
<a class="dropdown-item" href="#">Unit Code 2</a>
<a class="dropdown-item" href="#">Unit Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitName">Unit Name</label>
<input type="text" class="form-control" id="unitName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierCode">Supplier Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Supplier Code 1</a>
<a class="dropdown-item" href="#">Supplier Code 2</a>
<a class="dropdown-item" href="#">Supplier Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierName">Supplier Name</label>
<input type="text" class="form-control" id="supplierName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstCode">GST Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">GST Code 1</a>
<a class="dropdown-item" href="#">GST Code 2</a>
<a class="dropdown-item" href="#">GST Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstPercentage">GST Percentage</label>
<input type="text" class="form-control" id="gstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sgstPercentage">SGST Percentage</label>
<input type="text" class="form-control" id="sgstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="cgstPercentage">CGST Percentage</label>
<input type="text" class="form-control" id="cgstPercentage">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="costPrice">Cost Price</label>
<input type="text" class="form-control" id="costPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sellingPrice">Selling Price</label>
<input type="text" class="form-control" id="sellingPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="mrp">MRP</label>
<input type="text" class="form-control" id="mrp">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="boxWeight">Box Weight</label>
<input type="text" class="form-control" id="boxWeight">
</div>
</div>
<hr>
<div class="col-auto my-1">
<button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
<button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
<button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
</div>
<hr>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>and if you want you can add placeholders.
answered Jan 1 at 9:40
Partho63Partho63
1,6401722
hey man the select option you have made it doesn't have input field ...i want a input field with drop-down by its side..the select option you have made, its only a select option which is not input field...sorry that time i just saw the result i haven't checked carefully,please edit if you can,as you can see in my code there is input field first then a drop-down.
– dheeraj kumar
Jan 1 at 13:40
okok i was just stuck that's why i have asked..i ll do that by my own..sorry for that
– dheeraj kumar
Jan 2 at 12:26
@dheerajkumar Hey, I have updated my answer. Check the updated version if you like it !
– Partho63
Feb 7 at 6:39
add a comment |
2
+100
2
+100
2
+100
You can do something like this:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
.container {
margin: 5px auto;
padding: 5px;
color: #17A2B8;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
text-align: center;
}
.btn, .btn-outline-secondary {
border-color: #17A2B8;
background-color: #17A2B8;
color: #ffffff;
}
.btn:hover, .btn-outline-secondary:hover {
background-color: #ffffff;
color: #17A2B8;
border-color: #17A2B8;
}
.show > .btn-outline-secondary.dropdown-toggle {
color: #ffffff;
background-color: #17A2B8;
border-color: #17A2B8;
}
</style>
<div class="container">
<h1>Form</h1>
<form>
<div class="form-row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyId">Company ID</label>
<input type="text" class="form-control" id="companyId">
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName">
</div>
</div>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemName">Item Name</label>
<input type="text" class="form-control" id="itemName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandName">Brand Name</label>
<input type="text" class="form-control" id="brandName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryCode">Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Category Code 1</a>
<a class="dropdown-item" href="#">Category Code 2</a>
<a class="dropdown-item" href="#">Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryName">Category Name</label>
<input type="text" class="form-control" id="categoryName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryCode">Sub Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Sub Category Code 1</a>
<a class="dropdown-item" href="#">Sub Category Code 2</a>
<a class="dropdown-item" href="#">Sub Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryName">Sub Category Name</label>
<input type="text" class="form-control" id="subCategoryName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitCode">Unit Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Unit Code 1</a>
<a class="dropdown-item" href="#">Unit Code 2</a>
<a class="dropdown-item" href="#">Unit Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitName">Unit Name</label>
<input type="text" class="form-control" id="unitName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierCode">Supplier Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Supplier Code 1</a>
<a class="dropdown-item" href="#">Supplier Code 2</a>
<a class="dropdown-item" href="#">Supplier Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierName">Supplier Name</label>
<input type="text" class="form-control" id="supplierName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstCode">GST Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">GST Code 1</a>
<a class="dropdown-item" href="#">GST Code 2</a>
<a class="dropdown-item" href="#">GST Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstPercentage">GST Percentage</label>
<input type="text" class="form-control" id="gstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sgstPercentage">SGST Percentage</label>
<input type="text" class="form-control" id="sgstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="cgstPercentage">CGST Percentage</label>
<input type="text" class="form-control" id="cgstPercentage">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="costPrice">Cost Price</label>
<input type="text" class="form-control" id="costPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sellingPrice">Selling Price</label>
<input type="text" class="form-control" id="sellingPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="mrp">MRP</label>
<input type="text" class="form-control" id="mrp">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="boxWeight">Box Weight</label>
<input type="text" class="form-control" id="boxWeight">
</div>
</div>
<hr>
<div class="col-auto my-1">
<button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
<button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
<button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
</div>
<hr>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>and if you want you can add placeholders.
answered Jan 1 at 9:40
Partho63Partho63
1,6401722
You can do something like this:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
.container {
margin: 5px auto;
padding: 5px;
color: #17A2B8;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
text-align: center;
}
.btn, .btn-outline-secondary {
border-color: #17A2B8;
background-color: #17A2B8;
color: #ffffff;
}
.btn:hover, .btn-outline-secondary:hover {
background-color: #ffffff;
color: #17A2B8;
border-color: #17A2B8;
}
.show > .btn-outline-secondary.dropdown-toggle {
color: #ffffff;
background-color: #17A2B8;
border-color: #17A2B8;
}
</style>
<div class="container">
<h1>Form</h1>
<form>
<div class="form-row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyId">Company ID</label>
<input type="text" class="form-control" id="companyId">
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName">
</div>
</div>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemName">Item Name</label>
<input type="text" class="form-control" id="itemName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandName">Brand Name</label>
<input type="text" class="form-control" id="brandName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryCode">Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Category Code 1</a>
<a class="dropdown-item" href="#">Category Code 2</a>
<a class="dropdown-item" href="#">Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryName">Category Name</label>
<input type="text" class="form-control" id="categoryName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryCode">Sub Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Sub Category Code 1</a>
<a class="dropdown-item" href="#">Sub Category Code 2</a>
<a class="dropdown-item" href="#">Sub Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryName">Sub Category Name</label>
<input type="text" class="form-control" id="subCategoryName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitCode">Unit Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Unit Code 1</a>
<a class="dropdown-item" href="#">Unit Code 2</a>
<a class="dropdown-item" href="#">Unit Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitName">Unit Name</label>
<input type="text" class="form-control" id="unitName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierCode">Supplier Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Supplier Code 1</a>
<a class="dropdown-item" href="#">Supplier Code 2</a>
<a class="dropdown-item" href="#">Supplier Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierName">Supplier Name</label>
<input type="text" class="form-control" id="supplierName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstCode">GST Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">GST Code 1</a>
<a class="dropdown-item" href="#">GST Code 2</a>
<a class="dropdown-item" href="#">GST Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstPercentage">GST Percentage</label>
<input type="text" class="form-control" id="gstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sgstPercentage">SGST Percentage</label>
<input type="text" class="form-control" id="sgstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="cgstPercentage">CGST Percentage</label>
<input type="text" class="form-control" id="cgstPercentage">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="costPrice">Cost Price</label>
<input type="text" class="form-control" id="costPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sellingPrice">Selling Price</label>
<input type="text" class="form-control" id="sellingPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="mrp">MRP</label>
<input type="text" class="form-control" id="mrp">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="boxWeight">Box Weight</label>
<input type="text" class="form-control" id="boxWeight">
</div>
</div>
<hr>
<div class="col-auto my-1">
<button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
<button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
<button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
</div>
<hr>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>and if you want you can add placeholders.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
.container {
margin: 5px auto;
padding: 5px;
color: #17A2B8;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
text-align: center;
}
.btn, .btn-outline-secondary {
border-color: #17A2B8;
background-color: #17A2B8;
color: #ffffff;
}
.btn:hover, .btn-outline-secondary:hover {
background-color: #ffffff;
color: #17A2B8;
border-color: #17A2B8;
}
.show > .btn-outline-secondary.dropdown-toggle {
color: #ffffff;
background-color: #17A2B8;
border-color: #17A2B8;
}
</style>
<div class="container">
<h1>Form</h1>
<form>
<div class="form-row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyId">Company ID</label>
<input type="text" class="form-control" id="companyId">
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName">
</div>
</div>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemName">Item Name</label>
<input type="text" class="form-control" id="itemName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandName">Brand Name</label>
<input type="text" class="form-control" id="brandName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryCode">Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Category Code 1</a>
<a class="dropdown-item" href="#">Category Code 2</a>
<a class="dropdown-item" href="#">Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryName">Category Name</label>
<input type="text" class="form-control" id="categoryName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryCode">Sub Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Sub Category Code 1</a>
<a class="dropdown-item" href="#">Sub Category Code 2</a>
<a class="dropdown-item" href="#">Sub Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryName">Sub Category Name</label>
<input type="text" class="form-control" id="subCategoryName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitCode">Unit Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Unit Code 1</a>
<a class="dropdown-item" href="#">Unit Code 2</a>
<a class="dropdown-item" href="#">Unit Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitName">Unit Name</label>
<input type="text" class="form-control" id="unitName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierCode">Supplier Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Supplier Code 1</a>
<a class="dropdown-item" href="#">Supplier Code 2</a>
<a class="dropdown-item" href="#">Supplier Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierName">Supplier Name</label>
<input type="text" class="form-control" id="supplierName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstCode">GST Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">GST Code 1</a>
<a class="dropdown-item" href="#">GST Code 2</a>
<a class="dropdown-item" href="#">GST Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstPercentage">GST Percentage</label>
<input type="text" class="form-control" id="gstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sgstPercentage">SGST Percentage</label>
<input type="text" class="form-control" id="sgstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="cgstPercentage">CGST Percentage</label>
<input type="text" class="form-control" id="cgstPercentage">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="costPrice">Cost Price</label>
<input type="text" class="form-control" id="costPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sellingPrice">Selling Price</label>
<input type="text" class="form-control" id="sellingPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="mrp">MRP</label>
<input type="text" class="form-control" id="mrp">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="boxWeight">Box Weight</label>
<input type="text" class="form-control" id="boxWeight">
</div>
</div>
<hr>
<div class="col-auto my-1">
<button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
<button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
<button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
</div>
<hr>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style>
.container {
margin: 5px auto;
padding: 5px;
color: #17A2B8;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
text-align: center;
}
.btn, .btn-outline-secondary {
border-color: #17A2B8;
background-color: #17A2B8;
color: #ffffff;
}
.btn:hover, .btn-outline-secondary:hover {
background-color: #ffffff;
color: #17A2B8;
border-color: #17A2B8;
}
.show > .btn-outline-secondary.dropdown-toggle {
color: #ffffff;
background-color: #17A2B8;
border-color: #17A2B8;
}
</style>
<div class="container">
<h1>Form</h1>
<form>
<div class="form-row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyId">Company ID</label>
<input type="text" class="form-control" id="companyId">
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName">
</div>
</div>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemName">Item Name</label>
<input type="text" class="form-control" id="itemName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandName">Brand Name</label>
<input type="text" class="form-control" id="brandName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryCode">Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Category Code 1</a>
<a class="dropdown-item" href="#">Category Code 2</a>
<a class="dropdown-item" href="#">Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="categoryName">Category Name</label>
<input type="text" class="form-control" id="categoryName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryCode">Sub Category Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Sub Category Code 1</a>
<a class="dropdown-item" href="#">Sub Category Code 2</a>
<a class="dropdown-item" href="#">Sub Category Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="subCategoryName">Sub Category Name</label>
<input type="text" class="form-control" id="subCategoryName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitCode">Unit Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Unit Code 1</a>
<a class="dropdown-item" href="#">Unit Code 2</a>
<a class="dropdown-item" href="#">Unit Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="unitName">Unit Name</label>
<input type="text" class="form-control" id="unitName">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierCode">Supplier Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Supplier Code 1</a>
<a class="dropdown-item" href="#">Supplier Code 2</a>
<a class="dropdown-item" href="#">Supplier Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="supplierName">Supplier Name</label>
<input type="text" class="form-control" id="supplierName">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstCode">GST Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">GST Code 1</a>
<a class="dropdown-item" href="#">GST Code 2</a>
<a class="dropdown-item" href="#">GST Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="gstPercentage">GST Percentage</label>
<input type="text" class="form-control" id="gstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sgstPercentage">SGST Percentage</label>
<input type="text" class="form-control" id="sgstPercentage">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="cgstPercentage">CGST Percentage</label>
<input type="text" class="form-control" id="cgstPercentage">
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="costPrice">Cost Price</label>
<input type="text" class="form-control" id="costPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="sellingPrice">Selling Price</label>
<input type="text" class="form-control" id="sellingPrice">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="mrp">MRP</label>
<input type="text" class="form-control" id="mrp">
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="boxWeight">Box Weight</label>
<input type="text" class="form-control" id="boxWeight">
</div>
</div>
<hr>
<div class="col-auto my-1">
<button type="submit" class="btn"><i class="fa fa-save"></i> Save</button>
<button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button>
<button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button>
</div>
<hr>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>answered Jan 1 at 9:40
Partho63Partho63
1,6401722
edited Feb 7 at 6:38
answered Jan 1 at 9:40
Partho63Partho63
1,6401722
answered Jan 1 at 9:40
Partho63Partho63
1,6401722
answered Jan 1 at 9:40
Partho63Partho63
1,6401722
1,6401722
hey man the select option you have made it doesn't have input field ...i want a input field with drop-down by its side..the select option you have made, its only a select option which is not input field...sorry that time i just saw the result i haven't checked carefully,please edit if you can,as you can see in my code there is input field first then a drop-down.
– dheeraj kumar
Jan 1 at 13:40
okok i was just stuck that's why i have asked..i ll do that by my own..sorry for that
– dheeraj kumar
Jan 2 at 12:26
@dheerajkumar Hey, I have updated my answer. Check the updated version if you like it !
– Partho63
Feb 7 at 6:39
add a comment |
hey man the select option you have made it doesn't have input field ...i want a input field with drop-down by its side..the select option you have made, its only a select option which is not input field...sorry that time i just saw the result i haven't checked carefully,please edit if you can,as you can see in my code there is input field first then a drop-down.
– dheeraj kumar
Jan 1 at 13:40
okok i was just stuck that's why i have asked..i ll do that by my own..sorry for that
– dheeraj kumar
Jan 2 at 12:26
@dheerajkumar Hey, I have updated my answer. Check the updated version if you like it !
– Partho63
Feb 7 at 6:39
hey man the select option you have made it doesn't have input field ...i want a input field with drop-down by its side..the select option you have made, its only a select option which is not input field...sorry that time i just saw the result i haven't checked carefully,please edit if you can,as you can see in my code there is input field first then a drop-down.
– dheeraj kumar
Jan 1 at 13:40
hey man the select option you have made it doesn't have input field ...i want a input field with drop-down by its side..the select option you have made, its only a select option which is not input field...sorry that time i just saw the result i haven't checked carefully,please edit if you can,as you can see in my code there is input field first then a drop-down.
– dheeraj kumar
Jan 1 at 13:40
okok i was just stuck that's why i have asked..i ll do that by my own..sorry for that
– dheeraj kumar
Jan 2 at 12:26
okok i was just stuck that's why i have asked..i ll do that by my own..sorry for that
– dheeraj kumar
Jan 2 at 12:26
@dheerajkumar Hey, I have updated my answer. Check the updated version if you like it !
– Partho63
Feb 7 at 6:39
@dheerajkumar Hey, I have updated my answer. Check the updated version if you like it !
– Partho63
Feb 7 at 6:39
add a comment |
0
In order to make the inputs bigger I changed the columns sizes. All of the col-lg-2 I changed to col-lg-1 and all the col-lg-4 I changed to col-lg-5 and the inputs are looking much more full on wider displays. Here's a codepen with it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container" id="center">
<div class="input-group ">
<label class="col-lg-1 text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-1 text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-5 4 form-control ">
<label for="usr" class="col-lg-1 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
<input type="text" class="col-lg-3 3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
answered Feb 6 at 1:29
Drew GilliesDrew Gillies
1315
some input fields are displaying bigger in size..i also have tried but faced this kind of issues
– dheeraj kumar
Feb 6 at 4:58
use can usealign-items: flex-startthat will solve height issue for input.
– Chilll007
Feb 7 at 4:44
add a comment |
0
In order to make the inputs bigger I changed the columns sizes. All of the col-lg-2 I changed to col-lg-1 and all the col-lg-4 I changed to col-lg-5 and the inputs are looking much more full on wider displays. Here's a codepen with it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container" id="center">
<div class="input-group ">
<label class="col-lg-1 text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-1 text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-5 4 form-control ">
<label for="usr" class="col-lg-1 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
<input type="text" class="col-lg-3 3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
answered Feb 6 at 1:29
Drew GilliesDrew Gillies
1315
some input fields are displaying bigger in size..i also have tried but faced this kind of issues
– dheeraj kumar
Feb 6 at 4:58
use can usealign-items: flex-startthat will solve height issue for input.
– Chilll007
Feb 7 at 4:44
add a comment |
0
0
0
In order to make the inputs bigger I changed the columns sizes. All of the col-lg-2 I changed to col-lg-1 and all the col-lg-4 I changed to col-lg-5 and the inputs are looking much more full on wider displays. Here's a codepen with it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container" id="center">
<div class="input-group ">
<label class="col-lg-1 text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-1 text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-5 4 form-control ">
<label for="usr" class="col-lg-1 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
<input type="text" class="col-lg-3 3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
answered Feb 6 at 1:29
Drew GilliesDrew Gillies
1315
In order to make the inputs bigger I changed the columns sizes. All of the col-lg-2 I changed to col-lg-1 and all the col-lg-4 I changed to col-lg-5 and the inputs are looking much more full on wider displays. Here's a codepen with it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container" id="center">
<div class="input-group ">
<label class="col-lg-1 text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-1 text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-5 4 form-control ">
<label for="usr" class="col-lg-1 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
<input type="text" class="col-lg-3 3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
answered Feb 6 at 1:29
Drew GilliesDrew Gillies
1315
answered Feb 6 at 1:29
Drew GilliesDrew Gillies
1315
answered Feb 6 at 1:29
Drew GilliesDrew Gillies
1315
answered Feb 6 at 1:29
Drew GilliesDrew Gillies
1315
1315
some input fields are displaying bigger in size..i also have tried but faced this kind of issues
– dheeraj kumar
Feb 6 at 4:58
use can usealign-items: flex-startthat will solve height issue for input.
– Chilll007
Feb 7 at 4:44
add a comment |
some input fields are displaying bigger in size..i also have tried but faced this kind of issues
– dheeraj kumar
Feb 6 at 4:58
use can usealign-items: flex-startthat will solve height issue for input.
– Chilll007
Feb 7 at 4:44
some input fields are displaying bigger in size..i also have tried but faced this kind of issues
– dheeraj kumar
Feb 6 at 4:58
some input fields are displaying bigger in size..i also have tried but faced this kind of issues
– dheeraj kumar
Feb 6 at 4:58
use can use
align-items: flex-start that will solve height issue for input.– Chilll007
Feb 7 at 4:44
use can use
align-items: flex-start that will solve height issue for input.– Chilll007
Feb 7 at 4:44
add a comment |
0
I answered a similar question before. As you can see, setting a specific col width on doesn't work well for all of the labels since they're different widths.
There are several different workarounds for this including CSS grid and table-cell width, but IMO the easiest solution is to use display:table-cell and a media query so that it's only applied above a specific screen width. You'll also need to clean up the markup using col-form-label and correctly structured input groups.
<div class="form-row align-items-center">
<label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
<div class="input-group col-lg col-md-4 align-items-start py-2">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
...
</div>
Demo: https://www.codeply.com/go/GJ0Puh9pWd
Note: Don't use row and container-fluid together in the same element.
answered Feb 6 at 13:44
ZimZim
190k48398385
add a comment |
0
I answered a similar question before. As you can see, setting a specific col width on doesn't work well for all of the labels since they're different widths.
There are several different workarounds for this including CSS grid and table-cell width, but IMO the easiest solution is to use display:table-cell and a media query so that it's only applied above a specific screen width. You'll also need to clean up the markup using col-form-label and correctly structured input groups.
<div class="form-row align-items-center">
<label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
<div class="input-group col-lg col-md-4 align-items-start py-2">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
...
</div>
Demo: https://www.codeply.com/go/GJ0Puh9pWd
Note: Don't use row and container-fluid together in the same element.
answered Feb 6 at 13:44
ZimZim
190k48398385
add a comment |
0
0
0
I answered a similar question before. As you can see, setting a specific col width on doesn't work well for all of the labels since they're different widths.
There are several different workarounds for this including CSS grid and table-cell width, but IMO the easiest solution is to use display:table-cell and a media query so that it's only applied above a specific screen width. You'll also need to clean up the markup using col-form-label and correctly structured input groups.
<div class="form-row align-items-center">
<label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
<div class="input-group col-lg col-md-4 align-items-start py-2">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
...
</div>
Demo: https://www.codeply.com/go/GJ0Puh9pWd
Note: Don't use row and container-fluid together in the same element.
answered Feb 6 at 13:44
ZimZim
190k48398385
I answered a similar question before. As you can see, setting a specific col width on doesn't work well for all of the labels since they're different widths.
There are several different workarounds for this including CSS grid and table-cell width, but IMO the easiest solution is to use display:table-cell and a media query so that it's only applied above a specific screen width. You'll also need to clean up the markup using col-form-label and correctly structured input groups.
<div class="form-row align-items-center">
<label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
<div class="input-group col-lg col-md-4 align-items-start py-2">
<input type="text" class="form-control">
<div class="input-group-append">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
...
</div>
Demo: https://www.codeply.com/go/GJ0Puh9pWd
Note: Don't use row and container-fluid together in the same element.
answered Feb 6 at 13:44
ZimZim
190k48398385
answered Feb 6 at 13:44
ZimZim
190k48398385
answered Feb 6 at 13:44
ZimZim
190k48398385
answered Feb 6 at 13:44
ZimZim
190k48398385
190k48398385
add a comment |
add a comment |
0
As I discussed in comment section about top aligned, I have done some changes in your code for first row and others are commented if you like than proceed further.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div> -->
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>Same code on browser its giving perfect text box for me on small screen.
answered Feb 6 at 12:03
KandyKandy
338313
hey look input field size is greater then the input having dropdown
– dheeraj kumar
Feb 6 at 12:49
look i have uploaded a image on small device display
– dheeraj kumar
Feb 7 at 5:13
add a comment |
0
As I discussed in comment section about top aligned, I have done some changes in your code for first row and others are commented if you like than proceed further.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div> -->
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>Same code on browser its giving perfect text box for me on small screen.
answered Feb 6 at 12:03
KandyKandy
338313
hey look input field size is greater then the input having dropdown
– dheeraj kumar
Feb 6 at 12:49
look i have uploaded a image on small device display
– dheeraj kumar
Feb 7 at 5:13
add a comment |
0
0
0
As I discussed in comment section about top aligned, I have done some changes in your code for first row and others are commented if you like than proceed further.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div> -->
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>Same code on browser its giving perfect text box for me on small screen.
answered Feb 6 at 12:03
KandyKandy
338313
As I discussed in comment section about top aligned, I have done some changes in your code for first row and others are commented if you like than proceed further.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div> -->
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>Same code on browser its giving perfect text box for me on small screen.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div> -->
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div> -->
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>answered Feb 6 at 12:03
KandyKandy
338313
edited Feb 7 at 4:48
answered Feb 6 at 12:03
KandyKandy
338313
answered Feb 6 at 12:03
KandyKandy
338313
answered Feb 6 at 12:03
KandyKandy
338313
338313
hey look input field size is greater then the input having dropdown
– dheeraj kumar
Feb 6 at 12:49
look i have uploaded a image on small device display
– dheeraj kumar
Feb 7 at 5:13
add a comment |
hey look input field size is greater then the input having dropdown
– dheeraj kumar
Feb 6 at 12:49
look i have uploaded a image on small device display
– dheeraj kumar
Feb 7 at 5:13
hey look input field size is greater then the input having dropdown
– dheeraj kumar
Feb 6 at 12:49
hey look input field size is greater then the input having dropdown
– dheeraj kumar
Feb 6 at 12:49
look i have uploaded a image on small device display
– dheeraj kumar
Feb 7 at 5:13
look i have uploaded a image on small device display
– dheeraj kumar
Feb 7 at 5:13
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993684%2fhow-to-align-a-bootstrap-forms-input-fields-and-labels%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
for dropdown you can use this getbootstrap.com/docs/4.1/components/input-group/…
– Nisharg Shah
Jan 1 at 7:18
@NishargShah i am using the same,i think
– dheeraj kumar
Jan 1 at 7:41
i don't see
input-group-appendclass– Nisharg Shah
Jan 1 at 10:20
@NishargShah can you help me out with some code? please
– dheeraj kumar
Jan 2 at 10:50
why dont use top aligned label. it will give you good view in respect of left aligned
– Kandy
Feb 5 at 12:12