Horizontal Alignment Buttons in LWC using SLDS class

sometimes, we have to add input fields along with some lightning button. in that case, it wont be aligned horizontally exactly. here is the issue how it looks likes. 

align-elemtns-lwc

to fix that alignment, we have to wrap that button inside a div having class slds-m-top_large.

<div class="slds-m-top_large">
      <!-- your code here -->
 </div>

Align HTML elements horizontally in LWC

Sample code component.

HorizontalAlignButton.html

<template>
    <div class="slds-grid slds-gutters">
        <div class="slds-col">
            <lightning-input type="text" label="First Name"></lightning-input>
        </div>
        <div class="slds-col">
            <lightning-input type="text" label="Last Name"></lightning-input>
        </div>
        <div class="slds-col">
            <div class="slds-m-top_large">
                <lightning-button class="" variant="brand" label="Save"></lightning-button>
            </div>
        </div>
    </div>
</template>

Also found above code in Tech Shorts Git repo


Labels:
LWC
Join the conversation