Laugh it Out
Reputation: 1
Different alignments for <label> and <input> inside form-group
Is it possible to use different alignments inside the form-group,
i want the label to be in the left and input in the right, justify-content-start , justify-content-center and justify-content-end doesn't work inside <div class="form-group">
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="POST">
<div class="table-responsive">
<table class="table table-borderless border border-dark">
<tbody>
<tr class="d-flex">
<td class="col-6 border border-dark">
<div class="form-group form-inline justify-content-end">
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-end">
<label for="date">Date. :</label>
<input type="text" class="form-control" id="date" disabled>
</div>
<div class="form-group form-inline justify-content-end">
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-end">
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-end">
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
</td>
<td class="col-6 border border-dark">
<div class="form-group form-inline justify-content-center">
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-center">
<label for="date">Date. :</label>
<input type="text" class="form-control" id="date" disabled>
</div>
<div class="form-group form-inline justify-content-center">
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-center">
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-center">
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>Upvotes: 0
Views: 105
Answers (3)
Imran Rafiq Rather
Reputation: 8098
We need to do two things.
- Use
justify-content-betweenon the.form-group. - And also give
flexproperty to both the label and.form-controlin order for the spacing between being used up and to make it look good.
@media (min-width: 576px) {
.form-inline .form-control {
display: inline-block;
vertical-align: middle;
flex: 8;
}
.form-inline label {
display: inline-block;
flex: 4;
}
}<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<form method="POST">
<div class="table-responsive">
<table class="table table-borderless border border-dark">
<tbody>
<tr class="d-flex">
<td class="col-6 border border-dark">
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled />
</div>
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="date">Date. :</label>
<input
type="text"
class="form-control"
id="date"
disabled
/>
</div>
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled />
</div>
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled />
</div>
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled />
</div>
</td>
<td class="col-6 border border-dark">
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled />
</div>
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="date">Date. :</label>
<input
type="text"
class="form-control"
id="date"
disabled
/>
</div>
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled />
</div>
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled />
</div>
<div
class="form-group d-flex form-inline justify-content-between"
>
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>Upvotes: 0
Sajjad Ali
Reputation: 304
You can use justify-content-between
Try following code
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="POST">
<div class="table-responsive">
<table class="table table-borderless border border-dark">
<tbody>
<tr class="d-flex">
<td class="col-6 border border-dark">
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="date">Date. :</label>
<input type="text" class="form-control" id="date" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
</td>
<td class="col-6 border border-dark">
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="date">Date. :</label>
<input type="text" class="form-control" id="date" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>
Upvotes: 0
Lalji Tadhani
Reputation: 14149
Change Class Name on form-group justify-content-end to justify-content-between
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="POST">
<div class="table-responsive">
<table class="table table-borderless border border-dark">
<tbody>
<tr class="d-flex">
<td class="col-6 border border-dark">
<div class="form-group form-inline justify-content-between">
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-between">
<label for="date">Date. :</label>
<input type="text" class="form-control" id="date" disabled>
</div>
<div class="form-group form-inline justify-content-between">
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-between">
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-between">
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
</td>
<td class="col-6 border border-dark">
<div class="form-group form-inline justify-content-center">
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-center">
<label for="date">Date. :</label>
<input type="text" class="form-control" id="date" disabled>
</div>
<div class="form-group form-inline justify-content-center">
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-center">
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline justify-content-center">
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>Upvotes: 1
Related Questions
- Label isn't on the same line as its .input-group bootstrap 5
- Vertical alignment of form-controls with wrapping labels in a row with Bootstrap 4
- using form-group with label button is getting aligned to top
- How to align a Bootstrap form's input fields and labels?
- HTML bootstrap form fields alignment
- Bootstrap 4 label alignment
- Aligning form component using Bootstrap4
- Why my labels aren't aligned with the input-groups - Bootstrap
- How to align multiple textbox horizontally after label under form-group in bootstrap-3
- Bootstrap form group not aligning correctly