function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Tarun DasTarun Das 

How to reduce Next and Finish button in Lightning

Hi team,

I have created a next and finish button at the end of my quiz page,somehow both button looks very very big in desktop,how do i remove the big size and make it small like such small that it looks optimized in browser?
lightning page

Best Answer chosen by Tarun Das
Khan AnasKhan Anas (Salesforce Developers) 
Hi Tarun,

Greetings to you!

You need to extend force:slds in the application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. 

To extend force:slds:
<aura:application extends="force:slds">
    <c:Your_Component_Name />
</aura:application>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Tarun,

Greetings to you!

You need to extend force:slds in the application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. 

To extend force:slds:
<aura:application extends="force:slds">
    <c:Your_Component_Name />
</aura:application>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Deepali KulshresthaDeepali Kulshrestha
Hi Tarun,

I hope you have used the lightning:layout in your page which will make your buttons more customized and I also hope that you have used the lightning:button which makes whole thing more reliable . Please refer to the following links as they may be helpful in solving your problem:
https://developer.salesforce.com/docs/component-library/bundle/lightning:layout/example#lightningcomponentdemo:exampleLayoutPullToBoundary
https://developer.salesforce.com/docs/component-library/bundle/lightning:button

You can also use the grid system provided by slds in order to make your page more attractive and custom css to set the width of your button. Please refer to the links as they may be helpful in solving your problem:
https://www.lightningdesignsystem.com/utilities/grid/
http://sfdcmonkey.com/2017/02/06/use-css-lightning-component/

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha