Contents
Is it possible to use bootstrap along with SLDS in lightning app?
Can I use the Salesforce Lightning Design System together with Bootstrap or any other CSS framework? Yes. All CSS selectors are prefixed with . slds- to prevent any collisions.
What is SLDS in lightning?
The Salesforce Lightning Design System (SLDS) helps you build applications with the look and feel of Lightning Experience without writing a single line of CSS. SLDS is a CSS framework that gives you access to the icons, color palettes, and font that our developers use to create Lightning Experience.
How to use SLDs styles in Salesforce Lightning?
Use SLDS styles to give your custom Lightning web components a UI that is consistent with Salesforce, without having to reverse-engineer our styles. And best of all, it just works with Lightning components running in Lightning Experience and in the Salesforce mobile application.
Also, you cannot use SLDS stretch with a standard button, so you need to create a custom button. You can use slds-button_stretch class for your button to make it fit to your component width. Thanks for contributing an answer to Salesforce Stack Exchange!
Can a custom CSS class override a SLDs class?
If design tokens don’t work, create a custom CSS class instead of overriding an SLDS one. Create a class instead of targeting a class name you don’t own, since that class name can change. For example, don’t target .slds-input, as it’s part of the base component internal markup.
When to use utilities in Lightning design system?
Use utilities, such as grid and spacing classes for layout. When you add new functionality to the component, search Lightning Design System for patterns that work and apply the classes to the template. For example, use the utility classes to change your header size or add padding to your div containers.