<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e">[email protected]</a>/dist/css/bootstrap.min.css">
<div class="col-6">
<div class="cell">
<div class="d-flex justify-content-center">
<h1>Product</h1>
</div>
</div>
<div class="cell">
<hr class="w-100" size="5" />
</div>
<div class="cell">
<h3>price €</h3>
</div>
<div class="cell">
<hr class="w-100" size="5" />
</div>
<div class="cell">
<p class="lead">ART_DESIGNATION</p>
</div>
<div class="align-text-bottom">
<div class="cell">
<form class="position-fixed" action="" method="GET">
<div style="display: inline;">
<label>Quantité </label>
<input style="" type="number" placeholder="1" class="form-control">
<button style="" type="submit" class="btn btn-primary">Ajouter au panier</button>
</div>
</form>
</div>
</div>
</div>The webpage :
https://i.sstatic.net/z5n0R.png
I want to align the form (label, input, button) in one line and at the bottom of the page like this :
https://i.sstatic.net/bpnPv.png
However, I am unable to achieve this.
Can you provide assistance?
I have tried using Bootstrap classes to position the button as well as creating my own CSS properties, but none seem to give the desired result. I attempted the suggestions in this post, but they did not work for me and I prefer not to resurrect an old thread: How to align div to bottom inside div bootstrap