I am trying to create a simple page using Bootstrap within salesforce. I need this page to have the standard salesforce header and sidebar. When I use the standard bootstrap library via a CDN and the page is affecting all the CSS styling for my standard salesforce headers and side bars. Any help on how to prevent this ?
7
-
I'm assuming you want to keep the headers and side bars?– zainogjCommented Jun 9, 2015 at 16:18
-
Yes I want to keep the header and sidebar– HSGCommented Jun 9, 2015 at 16:19
-
2Unsure if this should be a comment or an answer so I will air on the side of caution......In order to use the standard sidebar and headers of SF with a bootstrapped page, you need to namespace the Bootstrap css files. Check out this post on how you can accomplish this. [bracketlabs.com/blog/2014/1/20/…– Chris DuncombeCommented Jun 9, 2015 at 16:19
-
There are also some existing libraries out there you can leverage as well. Visualstrap is one i have played with in the past [blogforce9dev-developer-edition.ap1.force.com/…– Chris DuncombeCommented Jun 9, 2015 at 16:21
-
The namespacing is probably the way to go, but wouldn't another option be to use VF components? Create a VF Component with the content you want, styled with Bootstrap, then reference the component in a VF page that uses header and sidebar. I've never tried that, but hypothetically, I don't see why it wouldn't work.– zainogjCommented Jun 9, 2015 at 16:23
|
Show 2 more comments
1 Answer
You can add namespace your bootstrap css file to avoid it. Both Less and Saas supports namespacing css files.
-
2Can you provide an example that illustrates how the namespace would be added in the Visualforce page? Or a link to an example?– Keith CCommented Jun 9, 2015 at 17:43