How to align Bootstrap input and labels using Grid System in Bootstrap?
1
I am Creating a form consist of several input fields, I am aligning them using Bootstrap 4 Grid system, but facing issues while aligning some input fields.
Snippet
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled">
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<label for="usr" class="col-lg-2 text-primary ">Selling Price
:</label> <input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>on small screen it is coming perfectly but on large screen the fields are not aligning properly.
What I am trying to achieve like:
I would like to create a more beautiful UI using Bootstrap 4. But my first priority is to align the fields properly on each device
html css3 bootstrap-4
edited Jan 11 at 19:23
halfer
14.5k758111
asked Dec 31 '18 at 11:27
manish thakurmanish thakur
48513
add a comment |
1
I am Creating a form consist of several input fields, I am aligning them using Bootstrap 4 Grid system, but facing issues while aligning some input fields.
Snippet
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled">
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<label for="usr" class="col-lg-2 text-primary ">Selling Price
:</label> <input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>on small screen it is coming perfectly but on large screen the fields are not aligning properly.
What I am trying to achieve like:
I would like to create a more beautiful UI using Bootstrap 4. But my first priority is to align the fields properly on each device
html css3 bootstrap-4
edited Jan 11 at 19:23
halfer
14.5k758111
asked Dec 31 '18 at 11:27
manish thakurmanish thakur
48513
add a comment |
1
1
1
I am Creating a form consist of several input fields, I am aligning them using Bootstrap 4 Grid system, but facing issues while aligning some input fields.
Snippet
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled">
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<label for="usr" class="col-lg-2 text-primary ">Selling Price
:</label> <input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>on small screen it is coming perfectly but on large screen the fields are not aligning properly.
What I am trying to achieve like:
I would like to create a more beautiful UI using Bootstrap 4. But my first priority is to align the fields properly on each device
html css3 bootstrap-4
edited Jan 11 at 19:23
halfer
14.5k758111
asked Dec 31 '18 at 11:27
manish thakurmanish thakur
48513
I am Creating a form consist of several input fields, I am aligning them using Bootstrap 4 Grid system, but facing issues while aligning some input fields.
Snippet
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled">
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<label for="usr" class="col-lg-2 text-primary ">Selling Price
:</label> <input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>on small screen it is coming perfectly but on large screen the fields are not aligning properly.
What I am trying to achieve like:
I would like to create a more beautiful UI using Bootstrap 4. But my first priority is to align the fields properly on each device
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled">
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<label for="usr" class="col-lg-2 text-primary ">Selling Price
:</label> <input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form><meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled">
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<label for="usr" class="col-lg-2 text-primary ">Selling Price
:</label> <input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>html css3 bootstrap-4
html css3 bootstrap-4
edited Jan 11 at 19:23
halfer
14.5k758111
asked Dec 31 '18 at 11:27
manish thakurmanish thakur
48513
edited Jan 11 at 19:23
halfer
14.5k758111
asked Dec 31 '18 at 11:27
manish thakurmanish thakur
48513
edited Jan 11 at 19:23
halfer
14.5k758111
edited Jan 11 at 19:23
halfer
14.5k758111
edited Jan 11 at 19:23
halfer
14.5k758111
14.5k758111
asked Dec 31 '18 at 11:27
manish thakurmanish thakur
48513
asked Dec 31 '18 at 11:27
manish thakurmanish thakur
48513
asked Dec 31 '18 at 11:27
manish thakurmanish thakur
48513
48513
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Company Name:</label>
<input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row">
<div class="input-group mt">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label>
<input type="text" class="col-lg-3 form-control">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Selling Price:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:50
Partho63Partho63
1,284420
this one is not looking good on small devices :(
– manish thakur
Dec 31 '18 at 12:11
so on small device how do you want it? have any example image like you gave in the question?
– Partho63
Dec 31 '18 at 12:14
yupp..or if i can create more attractiveUIthen it would be more helpfull
– manish thakur
Dec 31 '18 at 12:17
add a comment |
0
Add the following styles
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}
Also keep an invisible button with "Cost price" and "Company Id" similar to that with the dropdowns, so that your fields are properly aligned.
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<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-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:39
Nandita Arora SharmaNandita Arora Sharma
9,4732718
i have tried this one to add a invisible button...but look the input field of cost-price looks small which is not matching with the other inputs,its not looking good on mobile phones,i want to create each input field with same size,if drop-down is there then it will adjust with the size of input field
– manish thakur
Dec 31 '18 at 11:45
you can try something like this if it suits you jsfiddle.net/L4vtcmds
– Nandita Arora Sharma
Dec 31 '18 at 12:02
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%2f53986905%2fhow-to-align-bootstrap-input-and-labels-using-grid-system-in-bootstrap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Company Name:</label>
<input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row">
<div class="input-group mt">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label>
<input type="text" class="col-lg-3 form-control">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Selling Price:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:50
Partho63Partho63
1,284420
this one is not looking good on small devices :(
– manish thakur
Dec 31 '18 at 12:11
so on small device how do you want it? have any example image like you gave in the question?
– Partho63
Dec 31 '18 at 12:14
yupp..or if i can create more attractiveUIthen it would be more helpfull
– manish thakur
Dec 31 '18 at 12:17
add a comment |
1
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Company Name:</label>
<input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row">
<div class="input-group mt">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label>
<input type="text" class="col-lg-3 form-control">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Selling Price:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:50
Partho63Partho63
1,284420
this one is not looking good on small devices :(
– manish thakur
Dec 31 '18 at 12:11
so on small device how do you want it? have any example image like you gave in the question?
– Partho63
Dec 31 '18 at 12:14
yupp..or if i can create more attractiveUIthen it would be more helpfull
– manish thakur
Dec 31 '18 at 12:17
add a comment |
1
1
1
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Company Name:</label>
<input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row">
<div class="input-group mt">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label>
<input type="text" class="col-lg-3 form-control">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Selling Price:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:50
Partho63Partho63
1,284420
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Company Name:</label>
<input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row">
<div class="input-group mt">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label>
<input type="text" class="col-lg-3 form-control">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Selling Price:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form><meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Company Name:</label>
<input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row">
<div class="input-group mt">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label>
<input type="text" class="col-lg-3 form-control">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Selling Price:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form><meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Company Name:</label>
<input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row">
<div class="input-group mt">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<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">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label>
<input type="text" class="col-lg-3 form-control">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Selling Price:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:50
Partho63Partho63
1,284420
answered Dec 31 '18 at 11:50
Partho63Partho63
1,284420
answered Dec 31 '18 at 11:50
Partho63Partho63
1,284420
answered Dec 31 '18 at 11:50
Partho63Partho63
1,284420
1,284420
this one is not looking good on small devices :(
– manish thakur
Dec 31 '18 at 12:11
so on small device how do you want it? have any example image like you gave in the question?
– Partho63
Dec 31 '18 at 12:14
yupp..or if i can create more attractiveUIthen it would be more helpfull
– manish thakur
Dec 31 '18 at 12:17
add a comment |
this one is not looking good on small devices :(
– manish thakur
Dec 31 '18 at 12:11
so on small device how do you want it? have any example image like you gave in the question?
– Partho63
Dec 31 '18 at 12:14
yupp..or if i can create more attractiveUIthen it would be more helpfull
– manish thakur
Dec 31 '18 at 12:17
this one is not looking good on small devices :(
– manish thakur
Dec 31 '18 at 12:11
this one is not looking good on small devices :(
– manish thakur
Dec 31 '18 at 12:11
so on small device how do you want it? have any example image like you gave in the question?
– Partho63
Dec 31 '18 at 12:14
so on small device how do you want it? have any example image like you gave in the question?
– Partho63
Dec 31 '18 at 12:14
yupp..or if i can create more attractive
UI then it would be more helpfull– manish thakur
Dec 31 '18 at 12:17
yupp..or if i can create more attractive
UI then it would be more helpfull– manish thakur
Dec 31 '18 at 12:17
add a comment |
0
Add the following styles
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}
Also keep an invisible button with "Cost price" and "Company Id" similar to that with the dropdowns, so that your fields are properly aligned.
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<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-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:39
Nandita Arora SharmaNandita Arora Sharma
9,4732718
i have tried this one to add a invisible button...but look the input field of cost-price looks small which is not matching with the other inputs,its not looking good on mobile phones,i want to create each input field with same size,if drop-down is there then it will adjust with the size of input field
– manish thakur
Dec 31 '18 at 11:45
you can try something like this if it suits you jsfiddle.net/L4vtcmds
– Nandita Arora Sharma
Dec 31 '18 at 12:02
add a comment |
0
Add the following styles
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}
Also keep an invisible button with "Cost price" and "Company Id" similar to that with the dropdowns, so that your fields are properly aligned.
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<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-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:39
Nandita Arora SharmaNandita Arora Sharma
9,4732718
i have tried this one to add a invisible button...but look the input field of cost-price looks small which is not matching with the other inputs,its not looking good on mobile phones,i want to create each input field with same size,if drop-down is there then it will adjust with the size of input field
– manish thakur
Dec 31 '18 at 11:45
you can try something like this if it suits you jsfiddle.net/L4vtcmds
– Nandita Arora Sharma
Dec 31 '18 at 12:02
add a comment |
0
0
0
Add the following styles
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}
Also keep an invisible button with "Cost price" and "Company Id" similar to that with the dropdowns, so that your fields are properly aligned.
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<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-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:39
Nandita Arora SharmaNandita Arora Sharma
9,4732718
Add the following styles
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}
Also keep an invisible button with "Cost price" and "Company Id" similar to that with the dropdowns, so that your fields are properly aligned.
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<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-3 form-control ">
</div>
</div>
<br>
</div>
</form>.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<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-3 form-control ">
</div>
</div>
<br>
</div>
</form>.container .input-group {
align-items: center;
}
.container .input-group label {
margin: 0;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
<br>
<div class="row container">
<label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
<label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row container">
<div class="input-group mt">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<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-3 ">
<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">
<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-3 ">
<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-3 form-control ">
</div>
</div>
<div class="row container">
<div class="input-group mt-3">
<label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
<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-3 form-control ">
</div>
</div>
<br>
</div>
</form>answered Dec 31 '18 at 11:39
Nandita Arora SharmaNandita Arora Sharma
9,4732718
answered Dec 31 '18 at 11:39
Nandita Arora SharmaNandita Arora Sharma
9,4732718
answered Dec 31 '18 at 11:39
Nandita Arora SharmaNandita Arora Sharma
9,4732718
answered Dec 31 '18 at 11:39
Nandita Arora SharmaNandita Arora Sharma
9,4732718
9,4732718
i have tried this one to add a invisible button...but look the input field of cost-price looks small which is not matching with the other inputs,its not looking good on mobile phones,i want to create each input field with same size,if drop-down is there then it will adjust with the size of input field
– manish thakur
Dec 31 '18 at 11:45
you can try something like this if it suits you jsfiddle.net/L4vtcmds
– Nandita Arora Sharma
Dec 31 '18 at 12:02
add a comment |
i have tried this one to add a invisible button...but look the input field of cost-price looks small which is not matching with the other inputs,its not looking good on mobile phones,i want to create each input field with same size,if drop-down is there then it will adjust with the size of input field
– manish thakur
Dec 31 '18 at 11:45
you can try something like this if it suits you jsfiddle.net/L4vtcmds
– Nandita Arora Sharma
Dec 31 '18 at 12:02
i have tried this one to add a invisible button...but look the input field of cost-price looks small which is not matching with the other inputs,its not looking good on mobile phones,i want to create each input field with same size,if drop-down is there then it will adjust with the size of input field
– manish thakur
Dec 31 '18 at 11:45
i have tried this one to add a invisible button...but look the input field of cost-price looks small which is not matching with the other inputs,its not looking good on mobile phones,i want to create each input field with same size,if drop-down is there then it will adjust with the size of input field
– manish thakur
Dec 31 '18 at 11:45
you can try something like this if it suits you jsfiddle.net/L4vtcmds
– Nandita Arora Sharma
Dec 31 '18 at 12:02
you can try something like this if it suits you jsfiddle.net/L4vtcmds
– Nandita Arora Sharma
Dec 31 '18 at 12:02
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%2f53986905%2fhow-to-align-bootstrap-input-and-labels-using-grid-system-in-bootstrap%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
