How to align Bootstrap input and labels using Grid System in 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

Nandita Sharma · Accepted Answer · 2018-12-31 11:39:45Z

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>

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

Partho63 · Accepted Answer · 2018-12-31 11:50:53Z

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>

so on small device how do you want it? have any example image like you gave in the question?
yupp..or if i can create more attractive UI then it would be more helpfull

Collectives™ on Stack Overflow

How to align Bootstrap input and labels using Grid System in Bootstrap?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related