Tech blog to share information.

April 20, 2018

Handling Bootstrap conflicts with Salesforce Styles!

April 20, 2018 Posted by tjcool , , , , , No comments

Bootstrap is the one of most popular CSS framework we have on web an it has been used in nearly all web technologies. With the evolution of Lightning, Salesforce has also introduced UI framework known as Lightning Design System (recommended for SF apps).With the Lightning Design System, you can build custom applications with a look and feel that is consistent with the core features of Salesforce and it looks cool too.
When you have already developed app in Classic i.e. Visualforce pages + Apex and now if you are moving it to Lightning Experience in a iterative manner, then can be a situation where you are using both frameworks i.e. SLDS (as per new development) and Bootstrap CSS/Component from Old development.

As we have two well crafted ideas together, so there will be creativity or can say implementation conflicts. So , when you have common component that shares Bootstrap as well as SLDS/LDS, you will experience mess of styles (this happened to all of  us or atleast i have experienced it).

Solution 1

We can resolve this conflict (and keep both of them happy). As per our transition we are moving from Bootstrap > LDS, so will try to give unique namespace to Bootstrap styles. To do so, we can use {LESS} compiler.
{LESS} is a CSS pre-processor that lets you change variables before compiling to CSS. Click Here to know more.
Back to our problem , to fix Bootstrap conflict issue, we will be using LESS. Now Less will add prefix to all Bootstrap CSS with a class name. Below are step by step guide to do same.
  1. Download less compiler. Download
  2. Create  {filename}.less file, containing lines as per below syntax.
        @import (less) 'bootstrap.css'; /*Bootstrap CSS name*/
        @import (less) 'bootstrap-theme.css';  /* optional */
Filename: Bootstrap.less
        @import (less) 'bootstrap.css'; /*Bootstrap CSS name*/
        @import (less) 'bootstrap-theme.css';  /* optional */

  1. Compile : {filename}.less into {output}.css . Below is the command line:
 lessc Bootstrap.less bootstrap-ae.css
  1. To use Bootstrap CSS, wrap your HTML elements inside div.
<div class="bootstrap-ae">
   Any HTML here will be styled with Bootstrap CSS
  1. Open  new bootstrap file in text editor. You will notice that . <prefixes>(in my case it .bootstrap-ae)  prefixes body, html elements as well (which is not good as it’s not possible for a class to prefix the body, html).  and we want these styles to apply on the class only, so you can remove prefixes applied to body and html.

  1. You're done!

Solution 2

Same trick is applicable to Salesforce Lightning Design system as well. Lightning Salesforce Design System allows you to generate name spaced styles. In fact you will need to wrap your HTML in &lt;div class="my-slds">.
Click here to generate style

Step 1: Select and enter basic details. Check below screenshot.

Step 2 : Click on “Generate” button. This generate ready to use style sheet for you.

Creativity comes from a conflict of ideas.
- Donatella Versace -

I hope this is helpful. Please do Like and Subscribe Smile