如何使用Bootstrap中的网格系统对齐Bootstrap输入和标签？

Question

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

Answer 1

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> 

Answer 2

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>