How align button to the right

buttoncsslightning-web-components

how can I align this button to the right side?
I tried with "some classses" but it is not changing the place (working with lwc)

Button should be on right border

Html:

<template>

    <lightning-card variant="Narrow"  title="Broker Commission Rate" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <lightning-layout multiple-rows >
                
                <lightning-layout-item size="3" flexibility="auto" padding="horizontal-small">
                    <lightning-combobox
                        data-id = "Broker"
                        name="Broker"
                        label="Broker"
                        value={Broker}
                        options={groupOptions}
                        onchange={takeFilter}
                        variant="label-hidden">
                    </lightning-combobox>
                </lightning-layout-item>
                

                <lightning-layout-item size="4" flexibility="auto" padding="horizontal-small" class="slds-float_right">
                    <lightning-button label="New" variant="brand" onclick={openNewRecord} class="slds-m-left_x-small">
                    </lightning-button>
                </lightning-layout-item>

…

Thanks 🙂

Best Answer

You first need to occupy the whole space.

You have mentioned size="3" and size="4" which means, you only occupied 7 out of 12 grids.

You need to change it to

<lightning-layout multiple-rows >

    <lightning-layout-item size="3" flexibility="auto" padding="horizontal-small" class="slds-text-align_left">
        <lightning-combobox
                data-id = "Broker"
                name="Broker"
                label="Broker"
                value={Broker}
                options={groupOptions}
                onchange={takeFilter}
                variant="label-hidden">
        </lightning-combobox>
    </lightning-layout-item>


    <lightning-layout-item size="9" flexibility="auto" padding="horizontal-small" class="slds-text-align_right">
        <lightning-button label="New" variant="brand" onclick={openNewRecord} class="slds-m-left_x-small">
        </lightning-button>
    </lightning-layout-item>
</lightning-layout>

And add class in both, the first one being class="slds-text-align_left" and the second one to shift to right as class="slds-text-align_right".

Then it looks like this.

enter image description here

Related Topic