If you are using cards in your apps, there is a good chance you need to have buttons on the right top within the header. Below snippet will help you to align buttons or icons in the card header right.
<div class="card">
<div class="card-header d-flex justify-content-between">
<h4 class="card-title m-0">Fields</h4>
<div>
<a href="#" class="h4 text-success">
Delete
</a>
<a
href="#"
class="h4 text-danger"
title="Add new field"
>
<i class="icon svg-icon">
Add Field
</i>
</a>
</div>
</div>
<div class="card-body">
Some content goes here
</div>
</div>
Here we use flex utils to align the content within the headers. The util class justify-content-between separates the header and button section. We have grouped buttons inside a div for them to appear together in the right. You can learn more about the options in flex utils in bootstrap documentation at https://getbootstrap.com/docs/5.0/utilities/flex/#justify-content
This extract is from my CodeIgniter website generator new design. Here is how it appears in my website.