How to align div to bottom inside div bootstrap
You can also just use bootstrap flexbox to do this.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="d-flex align-items-start flex-column bg-success" style="height: 200px;">
<div class="mb-auto p-2">Flex item-1</div>
<div class="p-2">Flex item-2</div>
<div class="p-2">Flex item-3</div>
</div>
<div class="d-flex align-items-end flex-column bg-info" style="height: 200px;">
<div class="p-2">Flex item-a</div>
<div class="p-2">Flex item-b</div>
<div class="mt-auto p-2">Flex item-c</div>
</div>align items to the left or right make sure that you include the entire d-flex align-items-end flex-column on the parent element and choose start or end depending if you want it to be aligned left or right.
align item to the bottom Then, use mt-auto on the div that you want to stick to the bottom of the parent.
Suppose you have 2 divs. Div A(Outer) and Div B(Inner). To achieve your task just place Div B code in Div A code and in Div B css class add this
position : absolute
bottom : 0