user10561216
Reputation:
How to align a Bootstrap form's input fields and labels?
I am working on bootstrap-4 forms in which I have several input fields and labels. I have successfully created it, but want to add some features to it so that it looks great UI-wise and is user friendly.
Working Snippet
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>The output is fine on small devices, but on large devices I am facing the following issues:
- I am aligning 4 label and input field in one row, but the input fields are looking very small of width on the UI, because there is so much of space between label and input field
- the header which is "Company id and name" I want to offset them so that they appear in the center on large screens
- I have some drop-downs with some input fields; the input fields which don't have drop-downs I want to take full width, as they do on small devices
Changes I am trying to make are
I want input fields with drop-down not as only drop-down
Upvotes: 5
Views: 4142
Answers (4)
Partho63
Reputation: 3117
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.
Upvotes: 2
Kandy
Reputation: 673
As I discussed in comment section about top aligned, I have done some changes in your code for first row and others are commented if you like than proceed further.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
<br>
<div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
<div class="input-group ">
<label class="col-lg-2 text-primary">Company ID :</label> <input type="text" class="col-lg-4 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray;float: left;width: 100%;">
<div class="row container-fluid">
<div class="input-group mt-3">
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary">Item Code :</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
<input type="text" class="col-lg-10 form-control ">
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-12 text-primary ">Brand Code:</label>
<div class="dropdown-menu col-lg-2">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
<button type="button" class="btn btn-info dropdown-toggle col-lg-2" data-toggle="dropdown" style="height: 36px;width: auto;"></button>
</div>
<div class="col-lg-3">
<label for="usr" class="col-lg-10 text-primary" >Brand Name:</label>
<input type="text" class="col-lg-10 form-control">
</div>
</div>
</div>
<!-- <div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary" style="padding-top: 8px;">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Item Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Category Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Unit Name :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">GST Percentage :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">SGST Percentage:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Cost Price :</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Selling Price :</label>
<input type="text" class="col-lg-4 form-control ">
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">MRP:</label>
<input type="text" class="form-control col-lg-4 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-2 text-primary " style="padding-top: 8px;">Box Weight:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div> -->
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>Same code on browser its giving perfect text box for me on small screen.
Upvotes: 1
Carol Skelly
Reputation: 362360
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.
Upvotes: 1
Drew Gillies
Reputation: 53
In order to make the inputs bigger I changed the columns sizes. All of the col-lg-2 I changed to col-lg-1 and all the col-lg-4 I changed to col-lg-5 and the inputs are looking much more full on wider displays. Here's a codepen with it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid" style="border: 2px solid gray">
<br>
<div class="row container" id="center">
<div class="input-group ">
<label class="col-lg-1 text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label class="col-lg-1 text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
</div>
</div>
<hr style="border: 1px solid gray">
<div class="row container-fluid">
<div class="input-group ">
<label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Category Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Sub Category Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Sub Category Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">Unit Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Unit Name :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">Supplier Code:</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">Supplier Name:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 text-primary ">GST Code :</label>
<div class="dropdown-menu ">
<a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
</div>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
<label for="usr" class="col-lg-1 text-primary ">GST Percentage :</label>
<input type="text" class="col-lg-5 form-control ">
<label for="usr" class="col-lg-1 text-primary ">SGST Percentage:</label>
<input type="text" class="form-control col-lg-5 ">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary ">CGST Percentage:</label>
<input type="text" class="col-lg-3 form-control ">
</div>
</div>
<div class="row container-fluid">
<div class="input-group mt-3">
<label for="usr" class="col-lg-1 2 text-primary ">Cost Price :</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 2 text-primary ">Selling Price :</label>
<input type="text" class="col-lg-5 4 form-control ">
<label for="usr" class="col-lg-1 text-primary ">MRP:</label>
<input type="text" class="form-control col-lg-5 4">
<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
<label for="usr" class="col-lg-1 text-primary 2">Box Weight:</label>
<input type="text" class="col-lg-3 3 form-control ">
</div>
</div>
<hr style="border: 1px solid gray">
<button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i> Save
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i> Clear
</button>
<button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i> Close
</button>
<br>
<br>
</div>
</form>
Upvotes: 1
Related Questions
- Properly aligning Bootstrap form elements
- how to align form items with bootstrap
- Different alignments for <label> and <input> inside form-group
- How to Align Cols in Forms Bootstrap
- How to vertically align input fields that has different length of labels in bootstrap 4.3.1?
- How to align Bootstrap input and labels using Grid System in Bootstrap?
- HTML bootstrap form fields alignment
- Aligning form component using Bootstrap4
- Align labels & fields with Bootstrap form
- How to align bootstrap form inputs