I'm having trouble with Bootstrap-5. When I add the d-flex class to a container, my form inputs and labels shrink. If I remove d-flex, justify-center, and align-items-center from the container class, the form is no longer centered on the page. Adding these classes back in centers the content but causes the form inputs to shrink. Thank you for any help!
<div class="container d-flex justify-content-center align-items-center min-vh-100"></div>
<form method="POST" action="#">
<div class="row">
<div class="col-6 mb-3">
<label class="form-label" for="item">Enter Item</label>
<input class="form-control" id="item" name="item" required type="text" value="">
</div>
</div>
<div class="row">
<div class="col-6 mb-3">
<label class="form-label" for="category">Category</label>
<input class="form-control" id="category" name="category" required type="text" value="">
</div>
</div>
<div class="row">
<div class="col-6 mb-3">
<label class="form-label" for="price">Price</label>
<input class="form-control" id="price" name="price" required type="text" value="">
</div>
</div>
<div class="row">
<div class="col-6 mb-3">
<label class="form-label" for="location">Purchase Location</label>
<input class="form-control" id="location" name="location" required type="text" value="">
</div>
</div>
<div class="row">
<div class="mb-3 justify-content-around">
<input class="btn btn-outline-success" id="submit" name="submit" type="submit" value="Enter Data">
</div>
</div>
</form>
</div>
Before adding flex: https://i.sstatic.net/bcIG3.png
After adding flex: https://i.sstatic.net/EDCkR.png