Bootstrap 5 card header with button right

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>
          &nbsp;
          <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.