I want to display the buttons in the footer section to the center and I'm using the modal container. I have tried multiple CSS but none of them are not working, could you please suggest me the correct approach

My Div:

<footer class="slds-modal__footer " >
     <lightning:button type="Cancel" label="Cancel" variant="neutral" onclick="{!c.cancelAction}"/>
     <lightning:button type="Submit" label="Save" variant="brand" />

Current one


You can use SLDS grid system.
With the slds-grid class you define a flexbox then with slds-grid_align-center class you set the alignment of its content.
So you can define a div with these two classes and putting the buttons inside

<footer class="slds-modal__footer">
    <div class="slds-grid slds-grid_align-center">
         <lightning:button type="Cancel" label="Cancel" variant="neutral" onclick="{!c.cancelAction}" />
         <lightning:button type="Submit" label="Save" variant="brand" class="slds-var-m-left_x-small" />
  • It's working like a charm. Much appreciated
    – Pavan tej
    Nov 10 '21 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.