How to align a Bootstrap form's input fields and labels?

Question

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>&nbsp;Save
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-eraser'></i>&nbsp;Clear
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-window-close'></i>&nbsp;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

for dropdown you can use this getbootstrap.com/docs/4.1/components/input-group/… — Nisharg Shah
– Nisharg Shah, Commented Jan 1, 2019 at 7:18
why dont use top aligned label. it will give you good view in respect of left aligned — Kandy
– Kandy, Commented Feb 5, 2019 at 12:12

Partho63 · Accepted Answer · 2019-02-07 06:38:31Z

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.

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.
okok i was just stuck that's why i have asked..i ll do that by my own..sorry for that
@dheerajkumar Hey, I have updated my answer. Check the updated version if you like it !

Drew Gillies · Accepted Answer · 2019-02-06 01:29:33Z

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>&nbsp;Save
            </button>
    <button id="btn-search" class="btn btn-default " type="submit">
                <i class='fa fa-eraser'></i>&nbsp;Clear
            </button>
    <button id="btn-search" class="btn btn-default " type="submit">
                <i class='fa fa-window-close'></i>&nbsp;Close
            </button>

    <br>
    <br>
  </div>

</form>

some input fields are displaying bigger in size..i also have tried but faced this kind of issues
use can use align-items: flex-start that will solve height issue for input.

Carol Skelly · Accepted Answer · 2019-02-06 13:44:35Z

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.

Kandy · Accepted Answer · 2019-02-07 04:48:08Z

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>&nbsp;Save
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-eraser'></i>&nbsp;Clear
			</button>
    <button id="btn-search" class="btn btn-default " type="submit">
				<i class='fa fa-window-close'></i>&nbsp;Close
			</button>

    <br>
    <br>
  </div>

</form>

Same code on browser its giving perfect text box for me on small screen.

hey look input field size is greater then the input having dropdown

Collectives™ on Stack Overflow

How to align a Bootstrap form's input fields and labels?

4 Answers 4

3 Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related