How to put a div to the to buttom on boostrap - html

Question

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/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 €</h1>
</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 Web page :
I would like to put the form (label, input, button) in 1 line and to the bottom of the like this :
But I can't do it
Can you help me ?
I try to use bootsrap class for put buttom and also make my own CSS property but either it doesn't give a correct result or it doesn't do anything... I try to do tha this post say but that do nothing for me and i didnt want to up an old post : How to align div to bottom inside div bootstrap

Answer 1

You need to use Bootstrap grid properly.
See the snippet below.
.col-6 {
border: 1px solid red;
height: 500px;
}
img {
object-fit: cover;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="row">
<div class="col-6">
<img class="w-100 h-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg" alt="">
</div>
<div class="col-6">
<div class="row align-self-end h-100">
<div class="col-12">
<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>
<div class="col-12 d-flex align-items-end">
<div class="cell">
<form 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>
</div>
</div>