Lightning Web Components, Aura Components
  • Home
  • Home
  • Admin
  • Development
  • Lightning
  • LWC
  • align button in center in lightning component align button to right salesforce Lightning Component Basics Lightning Web Components lightning:button align right lightning:button position LWC LWC Basics

    How to align Lightning Button To Center, Right Or Left in LWC & Aura Components

    Published By: Venu Gutta
    Published on: Sunday, 20 September 2020
    A- A+

    Lightning Button Alignment

    In many cases we need button alignment to left, center or right. Event though we used correct slds classes, alignment will be not at expected position. In that cases we need to use "slds-clearfix" class for above div of the button, so that we can able to display lightning button at required place. 

    Slds CSS class for center alignment:  slds-align_absolute-center
    Slds CSS class for right alignment: slds-float_right
    Slds CSS class for left alignment: slds-float_left

    Button Alignment in LWC (Lightning Web Components)

    ButtonAlignmentInLwc.html
    <template>
        <div class="slds-clearfix">
            <lightning-button label="Left" class="slds-float_left"></lightning-button>
        </div>
        <div class="slds-clearfix">
            <lightning-button label="I am Center" class="slds-align_absolute-center"></lightning-button>
        </div>
        <div class="slds-clearfix">
            <lightning-button label="I am Right" class="slds-float_right"></lightning-button>
        </div>
    </template>

    Button Alignment In Lightning Aura Components:

    ButtonAlignmentInAura.cmp
    <aura:component >
        <div class="slds-clearfix">
            <lightning:button label="Left" class="slds-float_left"/>
        </div>
        <div class="slds-clearfix">
            <lightning:button label="I am Center" class="slds-align_absolute-center"/>
        </div>
        <div class="slds-clearfix">
            <lightning:button label="I am Right" class="slds-float_right"/>
        </div>
    </aura:component>

    Output

    Slds Lightning Button Alignment


    Subjects:

    align button in center in lightning component align button to right salesforce Lightning Component Basics Lightning Web Components lightning:button align right lightning:button position LWC LWC Basics

      Share This:

    Posted by: Venu Gutta at 07:23
    Tags: align button in center in lightning component , align button to right salesforce , Lightning Component Basics , Lightning Web Components , lightning:button align right , lightning:button position , LWC , LWC Basics
  • No Comment to " How to align Lightning Button To Center, Right Or Left in LWC & Aura Components "

‹‹ Newer Post Older Post ››
Subscribe to: Post Comments ( Atom )

Follow Us On Twitter

Follow @salesforcepoint
  • Popular
  • Recent
  • Archives

Popular Posts

  • LWC refreshApex: How To Refresh Page Data in Lightning Web Component
  • LWC Data Table With Checkbox Example
  • Navigate/Redirect To Record Page Based On Record Id In LWC (Lightning Web Component)
  • How To Add Hyper Link For Name Column In lightning-datatable in LWC
  • Reusable Custom LWC Lookup Component
  • How to invoke/call child lightning web component function from parent lightning web component
  • Salesforce Lightning Web Components - LWC Interview Questions
  • Validate LWC Input Data: How To Add Validations In Input Form
  • Difference Between Trigger.New and Trigger.old with Example
  • How to align Lightning Button To Center, Right Or Left in LWC & Aura Components

Recent Posts

Popular Tags

  • align button in center in lightning component
  • align button to right salesforce
  • Apex
  • Apex Collections
  • Apex Triggers
  • Child to Parent in Aura Components
  • Child to Parent in LWC
  • Child To Parent Lightning Aura component communication
  • Component Event in Lightning Aura Components with example.
  • connectedCallback() in JavaScript
  • connectedCallback() In lwc with example
  • Custom Label in Lwc
  • Data from Child LWC to Parent LWC
  • Data Table in Lightning Web Components
  • Data Table in LWC
  • Delete Selected Records in LWC Lightning Data Table
  • Development
  • dynamic combobox in lwc
  • Dynamic Lookup Lwc
  • File upload in Lightning Web Components
  • How to get record id in lwc
  • init in lwc
  • interview questions on lwc salesforce
  • iterate list in lwc
  • iteration in lwc html
  • JavaScript
  • Latest Salesforce Interview Questions
  • Lightning Aura Components
  • Lightning Component Basics
  • Lightning Component Data Table
  • Lightning Components
  • Lightning Web Component Data Table
  • Lightning Web Components
  • Lightning Web Components Basics
  • lightning web components interview questions
  • lightning-combobox lwc example
  • lightning-input validation lwc
  • lightning-input-field validation lwc
  • lightning:button align right
  • lightning:button position
  • Lookup
  • Lookup in Lightning Web Component
  • LWC
  • LWC Basics
  • LWC code
  • LWC Combobox
  • lwc combobox default value
  • lwc combobox dynamic values
  • lwc combobox event
  • LWC Component examples
  • lwc connectedCallback not working
  • lwc data table checkbox
  • LWC Data Table with Multiple Check box Selection Example
  • LWC File Upload Component
  • LWC Interview Questions
  • LWC iteration example
  • Lwc Lookup code
  • LWC Pick-List
  • LWC Problems
  • lwc refresh component
  • lwc refreshapex not working
  • onchange combobox lwc
  • refreshapex lwc example
  • refreshApex() Example
  • Resolve LWC Issues
  • Salesforce Admin Interview Questions
  • Salesforce Admin Notes
  • Salesforce Admin Tutorials
  • Salesforce Apex Trigger Best Practices
  • Salesforce Apex Triggers
  • Salesforce Configuration Notes
  • Salesforce Development Real-time Interview Questions
  • Salesforce Execution Steps
  • Salesforce Lightning Tutorials for beginers
  • Salesforce Lightning Tutorials Basics
  • Salesforce lwc
  • salesforce lwc interview questions
  • Salesforce Release Notes
  • Salesforce Scenario based Interview Questions
  • Salesforce Trigger Interview Questions
  • Salesforce Triggers Real time scenarios
  • salesforce Tutorials
  • Show Required Validation Message on Lwc input Form
  • SOQL
  • SOQL Interview Questions
  • Toast Notifications In LWC
  • Trigger Scenarios
  • Url field Column in Lwc Data Table
  • Use LWC Component in Lightning Aura Component
  • Validate LWC Input Values on Submit
  • when to use connectedcallback in lwc
  • Winter 21 Salesforce Release
  • wire lwc
© 2020 - Salesforcepoint.com. All Rights Reserved. Designed & Developed by Salesforcepoint.com