The image says it all, but in case it doesn't: I am using Bootstrap 5 and creating a form with a grid layout. One label has multiple lines of text and it moves that item out of line with the others that are horizontally adjacent to it.
Offending HTML:
<!-- Include Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<div class="row">
<div class="col-6 offset-3">
<form action="/" method="POST" novalidate class="row g-3 validated-form">
<div class="col-12 mb-3">
<label for="address-line-1" class="form-label">Address Line 1</label>
<input type="text" id="address-line-1" class="form-control" name="addressLine1" autocomplete="address-line1" required>
</div>
<div class="col-12 mb-3">
<label for="address-line-2" class="form-label">Address Line 2</label>
<input type="text" id="address-line-2" class="form-control" name="addressLine2" autocomplete="address-line2">
</div>
<div class="col-md-6 mb-3">
<label for="city" class="form-label">City</label>
<input type="text" id="city" class="form-control" name="city" autocomplete="address-level2" required>
</div>
<div class="col-md-4 mb-3">
<label for="region" class="form-label">Province/State</label>
<input type="text" id="region" class="form-control" name="region" autocomplete="address-level1" required>
</div>
<div class="col-md-2 mb-3">
<label for="postcode" class="form-label">Postal Code/ZIP</label>
<input type="text" id="postcode" class="form-control" name="postcode" autocomplete="postal-code" required>
</div>
<button class="btn btn-primary">Create</button>
</form>
</div>
</div>Does anyone know how to have these items align sensibly? I have tried using "d-flex align-items-end" to align each label/input combo at the bottom of their grid section but they unstack and I lose all the default form styling. Would really appreciate any suggestions, either in aligning things to the bottom or in a workaround.
