Currently utilizing Bootstrap 5.2, I have integrated a form with the following snippet:
<div class="row mb-2 align-items-center">
<div class="col-sm-4">
<label class="checkbox-inline" for="Credit_Pulled">Credit Pulled</label>
<input type="checkbox" class="form-check-inline" value="1" name="Credit_Pulled" id="Credit_Pulled">
</div>
<div class="col-sm-4">
<label class="checkbox-inline" for="Is_On_Terms">Approved For Terms</label>
<input type="checkbox" class="align-middle" value="true" name="Is_On_Terms" id="Is_On_Terms">
</div>
<div class="col-sm-4 form-floating">
<label for="Terms_Days">Terms Period</label>
<select class="form-select form-control d-flex" id="Terms_Days" name="Terms_Days">
<option value="0" selected>NONE</option>
<option value="30">NET-30</option>
<option value="60">NET-60</option>
<option value="90">NET-90</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-4 form-floating">
<label for="Credit_Limit">Approved Limit</label>
<input type="text" class="form-control d-flex" id="Credit_Limit" name="Credit_Limit">
</div>
</div>
<div class="row mb-2">
<div class="col-sm-12 w-100 form-floating">
<label for="Review_Notes">Review Notes</label>
<textarea class="form-control rounded" rows="8" id="Review_Notes" name="Review_Notes"></textarea>
</div>
</div>
Upon previewing the form, it's evident that the form labels and their content are overlapping. Is there any way to resolve this issue, possibly through custom CSS, in order to display them cleanly?