CSS Bootstrap put button on right bottom corner - html

Question

I need help putting a button in the bottom-right corner of a Bootstrap col.
I want to put the button where the black outline is in the image below.
<div class="container-fluid m-0">
<div class="d-flex bg-secondary m-0 rounded">
<div class="container">
<div class="row">
<div class="col-sm bg-info">
<div>
</div>
</div>
<div class="col-sm">
<h3> Username</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
<p>xxx Followers . xxx Following</p>
</div>
<div class="col-sm bg-danger">
<p class="ml-auto">
<button type="button" class="btn btn-primary">Cancel</button>
</p>
</div>
</div>
</div>
</div>

Answer 1

Check this out--
<div class="container-fluid m-0">
<div class="d-flex bg-secondary m-0 rounded">
<div class="container">
<div class="row">
<div class="col-sm bg-info">
<div>
</div>
</div>
<div class="col-sm">
<h3> Username</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
<p>xxx Followers . xxx Following</p>
</div>
<div class="col-sm bg-danger">
<p style="height: 100%" class="d-flex justify-content-end align-items-end">
<button type="button" class="btn btn-primary">Cancel</button>
</p>
</div>
</div>

Answer 2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="bg-secondary rounded">
<div class="container bg-secondary">
<div class="row align-items-stretch">
<div class="col-12 col-sm bg-info"></div>
<div class="col-12 col-sm">
<div class="py-3">
<h3> Username</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
<p>xxx Followers . xxx Following</p>
</div>
</div>
<div class="col-12 col-sm bg-danger">
<div class="h-100 d-flex align-items-end justify-content-end py-3">
<button type="button" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

There are two methods to implement this...
The first method:
<div class="container-fluid">
<div class="bg-secondary rounded">
<div class="container bg-secondary">
<div class="row align-items-stretch">
<div class="col-12 col-sm bg-info"></div>
<div class="col-12 col-sm">
<div class="py-3">
<h3> Username</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
<p>xxx Followers . xxx Following</p>
</div>
</div>
<div class="col-12 col-sm bg-danger">
<div class="h-100 d-flex align-items-end justify-content-end py-3">
<button type="button" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
This is the easiest one.
The second method:
Go to index.css or App.css or you can go to any other CSS file if you have imported it into your file.
Write this piece of code:
.col-sm {
height: 100%; !important
display: flex; !important
justify-content: flex-end; !important
align-items: flex-end; !important
}
You can also give a class and then write the CSS code based on the class.