smaller distance between label and input element - html

Question

I have got a html form, designed with bootstrap classes. I would like to reduce the distance between the <label> (more pricesly the text) and the <input> element, as they are aranged horizontally at a breakpoint smaller than sm (576px).
The distance between "Anzahl" and the numeric input should be smaller.
This is my current code:
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for="numAmount" class="form-label">Anzahl</label>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<input type="number" class="form-control" id="numAmount" required>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for"datDate" class="form-label">Datum</label>
</div>
<div class="col-12 col-sm-6 col-lg-3 ">
<input type="date" class="form-control" id="datDate" value="<? echo date("Y-m-d"); ?>" required>
</div>
</div>

Answer 1

Just use in the label the class mb-0 that means margin-bottom: 0px; in your labels like this:
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for="numAmount" class="form-label mb-0">Anzahl</label>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<input type="number" class="form-control" id="numAmount" required>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for"datDate" class="form-label mb-0">Datum</label>
</div>
<div class="col-12 col-sm-6 col-lg-3 ">
<input type="date" class="form-control" id="datDate" value="<? echo date("Y-m-d"); ?>" required>
</div>
</div>
Also, you can use this class with different numbers 1-5 to specify any margin-bottom as you needed, see also this about the other helper classes like this:
https://getbootstrap.com/docs/4.6/utilities/spacing/

Answer 2

just zero out margin-bottom on the form-label class
.form-label{
margin-bottom:0!important;}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for="numAmount" class="form-label">Anzahl</label>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<input type="number" class="form-control" id="numAmount" required>
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
<label for"datDate" class="form-label">Datum</label>
</div>
<div class="col-12 col-sm-6 col-lg-3 ">
<input type="date" class="form-control" id="datDate" value='<? echo date("Y-m-d"); ?>' required>
</div>
</div>