Edit the footer of lightning card

Question

I have created a custom lightning page and it looks like the below screenshot.

But I want to place the delete button exactly before the cancel button

Can someone please suggest to achieve the same?

below is the code for the same

<aura:component controller="OverRideDeleteButton" implements="force:lightningQuickAction, force:hasRecordId" >
    <lightning:card >
        <p>Are you sure you want to delete this record</p>

        <div class="slds-docked-form-footer">
            <lightning:button variant="destructive" label="Delete" onclick="{!c.deleteRecord}"/>
        </div>
    </lightning:card>
</aura:component>

Answer 1

You can split your card into sections using aura:set's as specified in the documentation (ex, ehader, body, footer), you might want to refactor your code to something similar to what is provided in the documentation:

 <lightning:card>
    <aura:set attribute="title">
        <lightning:icon iconName="utility:connected_apps" size="small"/>
        {! v.title }
    </aura:set>
    <aura:set attribute="footer">
        <lightning:badge label="Tag1"/>
        <lightning:badge label="Tag2"/>
        <lightning:badge label="Tag3"/>
    </aura:set>
    Card Body (custom component)
</lightning:card>

Answer 2

I've added some custom CSS on the footer div tag and then It worked in my case.

Note: add a class name where you want to apply CSS.

the codes are below like this.

.myFooter { width: 93%; position: fixed; bottom: 80px; background-color: white; padding: 10px; }